所有HTML元素都可以看作盒子。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。因为Div添加了padding、border，Div的实际宽度=Div的初始固定值+边距值+边框值
盒子模型的组成：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像
以上是html中盒子模型的结构，每个元素都可以用这个盒子模型来解析。在开发中，一个元素的样式表现形式，也是由这个盒子模型的每个部分来表现的。对应到css中样式的属性有一下几个纬度——width, height, padding, border, margin。由于在不同的浏览器中，这几个属性所表示的盒子模型中的部分有所差异，所以又分为了标准盒子模型和怪异盒子模型。
box-sizing下的盒子模型
语法：（属性）box-sizing: （属性值）content-box/border-box/inherit；
box-sizing对盒子模型的影响：
（1）当“box-sizing“的值为”content-box“时，css中的width所包含的部分是盒子模型中content的宽度。此时和标准盒子模型表现一致。
（2）当“box-sizing“的值为”border-box“时，css中的width所包含@www.xuepai.net的是盒子模型中的content的宽度+padding+border的宽度。此时和怪异盒子模型的表现一致。
总结：box-sizing属性，@www.haoshilao.net让开发人员可以控制浏览器的是以标准盒子模型表现，还是以怪异盒子模型表现。
|
1
2
3
4
5
6
7
|
.box { box-sizing: border-box; padding : 0 20px; width : 780px; height : 355px; background: #f2f1ef;} |
calc()的运用
知道总宽度是100%，在这个基础上减去boder的宽度（5px * 2 = 10px）,在减去padding的宽度（10px * 2 = 20px），即”100% - (10px + 5px) * 2 = 30px” ，最终得到的值就是div.box的width值：
|
1
2
3
4
5
6
7
8
9
10
|
.box { background: #f60; height: 50px; padding: 10px; border: 5px solid green; width: 90%;/*写给不支持calc()的浏览器*/ width:-moz-calc(100% - (10px + 5px) * 2); width:-webkit-calc(100% - (10px + 5px) * 2); width: calc(100% - (10px + 5px) * 2);} |