CSS 盒子模型

502 阅读2分钟

在 CSS 盒子模型理论中,页面中所有的元素都可以看作一个盒子,并且占据着一定的页面空间。一个页面由很多盒子组成,因此掌握盒子模型不仅要掌握一个盒子的内部结构,还要理解多个盒子的相互关系。

一、盒子模型

每一个元素都可以看作一个盒子,盒子模型由四个属性组成:content(内容)、padding(内边距)、margin(外边距)、border(边框)。

image.png

1、内容区

内容区是盒子模型必备的组成部分,有三个属性:width、height、overflow,(width、height 属性所包含的范围决定了它是哪种盒子模型,在最后解释),overflow 指定当内容溢出区域的宽度或高度时,溢出的处理方式。

2、内边距

内边距指内容区和边框之间的空间,有五个属性:padding-top、padding-bottom、padding-left、padding-right 和 padding。

3、外边距

外边距指两个盒子之间的距离,可能是子元素和父元素之间,也可能时两个兄弟元素之间,有五种属性:margin-top、margin-bottom、margin-left、margin-right 和 margin,取值可以为负数,即向反方向偏移。

当只有父元素存在时,margin 相对于父元素而言;当既有父元素,又有兄弟元素时,该元素会向四个方向看看有没有兄弟元素存在,如果这个方向有兄弟元素,这个方向的 margin 就相对于兄弟元素而言,否则相对于父元素而言。

4、边框

和之前提到的边框相同,不再赘述。

二、元素的宽高

使用 width 和 height 属性来设置,其中,行内元素的宽高设置不生效,其大小取决于内容的多少,只有块级元素才能设置宽高;要想设置行内元素的宽高,将其的 display 属性设为 inline-block。

三、padding 和 margin 的简写形式

以 padding 为例,有如下三种简写方式:

padding:10px;
padding:10px 5px;
padding:1px 2px 3px 4px;

第一行表示四个内边距都是 10px;第二行表示上下内边距为 10px,左右内边距为 5px;第三行表示上、右、下、左四个方向的内边距分别为 1px、2px、3px、4px(顺时针)。

外边距简写形式相同。

四、标准盒子模型和 IE 盒子模型

标准盒子模型 的 width 和 height 属性是指 content 的宽高,所以标准盒子模型的宽高 = width(height) + padding + border + margin;

IE 盒子模型 的 width 和 height 属性是指 content、padding、border 三部分的宽高,所以 IE 盒子模型的宽高 = width(height)+ margin;

切换盒模型使用 box-sizing 属性,标准盒模型:box-sizing : content-box; IE 盒模型:box-sizing : border-box ,默认属性是 content-box。