06.CSS盒子模型
一.理解css盒子模型
HTML中的每一个元素都可以看做是一个盒子
HTML中的每一个元素都可以看做是一个盒子，如右下图所示，可以具备这4个属性
在浏览器中检查元素可得到下图：
二.标准盒子模型
从上图可以看到标准，W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。
w3c中的盒子模型的宽:包括margin+border+padding+width;
width:margin2+border2+padding*2+width;
height:margin2+border2+padding*2+height;
三.IE盒子模型(怪异盒子模型)
四.CSS盒子和IE盒子区别
从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。
网页中的盒子模型；我们常常要控制盒子模型的宽度width:
w3c中的盒子模型的宽:包括margin+border+padding+width;
width:margin2+border2+padding*2+width;
height:margin2+border2+padding*2+height;
iE中的盒子模型的width:也包括margin+border+padding+width;
上面的两个宽度相加的属性是一样的。不过在ie中content的宽度包括padding和border这两个属性；
例如一个盒子模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px;
如果用w3c盒子模型解释，那么这个盒子模型占用的
宽度为：202+102+10*2+200=280px;
高度：202+102+20*2+50=130px;
盒子的实际宽度大小为:102+102+200=240px;
实际高度：102+102+50=90px;
用ie的盒子模型解释 ：盒子在网页中占据的大小为202+200=240px; 高：202+50=90px;
盒子的实际大小为：宽度:200px, 高度:50px;
我们常常理解的盒子模型是w3c这样的盒子模型
五.box-sizing属性
- box-sizing用来设置盒子模型中宽高的行为
- content-box：padding、border都布置在width、height外边
- border-box：adding、border都布置在width、height里边
5.1 box-sizing: content-box;
- 元素的实际占用宽度 = border + padding + width
- 元素的实际占用高度 = border + padding + height
5.2 box-sizing: border-box;
- 元素的实际占用宽度 = width
- 元素的实际占用高度 = height
5.3 盒子模型
