一、什么是盒模型
当你的浏览器展现一个元素时,这个元素会占据一定的空间。这个空间由四部分组成。
中间是元素呈现内容的区域。这个区域的外面是内边距。再外面是边框。最外面的是外边距,外边距将该元素与其它元素分开。
—— 引用自MDN官网
二、盒模型的组成
盒模型由四个部分组成,如下:
1、内容区域(content)
2、内边距(padding):元素内容与边框之间的填充距离(设置元素背景时,背景会填充该区域)
3、边框(border)
4、外边距(margin):当前元素边框与其他外部元素之间的留白区域(设置元素背景时,背景不会填充该区域,margin的背景是透明的)
三、盒模型的分类
1、盒模型又分为W3C标准盒模型和IE盒模型。
2、两种盒模型的区别
①W3C标准盒模型:元素的属性width和height只包含内容区域content,不包含内边距padding和边框border;
②IE盒模型:元素的属性width和height包含内容区域content、内边距padding、边框border,即content + padding + border。
大部分现代浏览器使用W3C标准盒模型,ie5和ie6使用的是IE盒模型。
四、box-sizing
1、作用
CSS3中的box-sizing属性规定了使用何种方式计算元素的宽高。兼容ie8+。
2、取值
content-box:元素的宽高采用标准盒模型来计算,默认值;
border-box:元素的宽高采用ie盒模型来计算;
inherit:元素宽高的计算方式继承父元素。
3、栗子
1)添加一个div,设置宽高为100*100
1 .box { 2 width: 100px; 3 height: 100px; 4 background-color: blue; 5 }
谷歌浏览器,F12审查元素:
此时div的宽高为100*100,即这时div的大小 = content的大小;
2)接着给div添加内边距
1 .box { 2 width: 100px; 3 height: 100px; 4 background-color: blue; 5 padding: 20px; /* padding的值只有一个时,表示元素上下左右的内边距均为20px */ 6 }
此时div的宽高为140*140,即这时div的大小 = content + padding;
3)接着给div添加边框
1 .box { 2 width: 100px; 3 height: 100px; 4 background-color: blue; 5 padding: 20px; 6 border: 10px solid red; 7 }
此时div的宽高为160*160,即这时div的大小 = content + padding + border;
4)最后给div添加外边距
此时div的宽度还是160*160,同时可以看到div四周多了20px宽度的留白,即margin不会影响div的大小。
综上,我们可以得出:
①默认情况下,盒子的width、height属性的值只是设置了盒子内容区域的大小,而不包含内边距和边框大小;
②盒子的大小 = 内容区域 + 内边距区域 + 边框区域,而不包含外边距margin。
5)设置div的box-sizing为border-box
1 .box { 2 width: 100px; 3 height: 100px; 4 background-color: blue; 5 padding: 20px; 6 border: 10px solid red; 7 margin: 20px; 8 box-sizing: border-box; 9 }
此时div的大小为100*100,即当设置了box-sizing为border-box时,无论如何修改padding、border、margin的值,div的大小都等于元素width和height的值。