专注Java教育14年 全国咨询/投诉热线:400-8080-105
动力节点LOGO图
始于2009,口口相传的Java黄埔军校
首页 hot资讯 浅谈CSS盒子模型

浅谈CSS盒子模型

更新时间:2021-04-02 16:34:41 来源:动力节点 浏览995次

在HTML中我们了解了重要的理论“块元素和行内元素”,本文我们将接触CSS中一个极其重要的理论,那就是“CSS盒子模型”理论。

在“CSS盒子模型”理论中,所有页面中的元素都可以看成一个盒子,并且占据着一定的页面空间。

一个页面由很多这样的盒子组成,这些盒子之间会互相影响,因此掌握盒子模型需要从两个方面来理解:一是理解单独一个盒子的内部结构,二是理解多个盒子之间的相互关系。

每个元素都看成一个盒子,盒子模型是由content(内容)、padding(内边距)、margin(外边距)和border(边框)这四个属性组成的。此外,在盒子模型中,还有宽度width和高度height两大辅助性属性。

下图为一个CSS盒子模型的内部结构:

1.内容区

内容区是CSS盒子模型的中心,它呈现了盒子的主要信息内容,这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分,其他的3部分都是可选的。

内容区有3个属性:width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。在这里注意一点,width和height这两个属性是针对内容区而言,并不包括padding部分。

当内容信息太多时,超出内容区所占范围时,可以使用overflow溢出属性来指定处理方法。对于overflow这个属性,我们在后面会详细讲解到。

2.内边距

内边距,指的是内容区和边框之间的空间,可以被看做是内容区的背景区域。

关于内边距的属性有5种,即padding-top、padding-bottom、padding-left、padding-right以及综合了以上4个方向的简洁内边距属性padding。使用这5种属性可以指定内容区域各方向边框之间的距离

3.边框

在CSS盒子模型中,边框跟我们之前学过的边框是一样的。

边框属性有border-width、border-style、border-color以及综合了3类属性的快捷边框属性border。

其中border-width指定边框的宽度,border-style指定边框类型,border-color指定边框的颜色。

“border-width:1px;border-style:solid;border-color:gray;”等价于“border:1px solid gray;”。

4.外边距

外边距,指的是两个盒子之间的距离,它可能是子元素与父元素之间的距离,也可能是兄弟元素之间的距离。

外边距使得元素之间不必紧凑地连接在一起,是CSS布局的一个重要手段。

外边距的属性也有5种,即margin-top、margin-bottom、margin-left、margin-right以及综合了以上4个方向的简洁内边距属性margin。

同时,CSS允许给外边距属性指定负数值,当指定负外边距值时,整个盒子将向指定负值的相反方向移动,以此可以产生盒子的重叠效果。这就是传说中的“负margin技术”,我们将会在“CSS进阶教程”中给读者详细讲解这一个高大上的技术喔。

内容区、内边距、边框、外边距这几个概念可能比较抽象,对于初学者来说,一时半会还没办法全部理解。不过没关系,待我们看完本站的CSS教程之后再回顾这些概念就变得很简单了。

提交申请后,顾问老师会电话与您沟通安排学习

免费课程推荐 >>
技术文档推荐 >>