参照：1. W3cplus 2.MDN
box model
CSS中Box model是分为两种，第一种是W3C的标准模型，另一种是IE的传统模型。涉及到width, height, padding, border和margin。
1、W3C的标准Box Model:
?/*外盒尺寸计算（元素空间尺寸）*/ ?Element空间高度 = content height + padding + border + margin ?Element 空间宽度 = content width + padding + border + margin ?/*内盒尺寸计算（元素大小）*/ ?Element Height = content height + padding + border （Height为内容高度） ?Element Width = content width + padding + border （Width为内容宽度）2、IE)传统下Box Model（IE6以下，不含IE6版本或“QuirksMode下IE5.5+”）:
?/*外盒尺寸计算（元素空间尺寸）*/ ?Element空间高度 = content Height + margin (Height包含了元素内容宽度，边框宽度，内距宽度) ?Element空间宽度 = content Width + margin (Width包含了元素内容宽度、边框宽度、内距宽度) ?/*内盒尺寸计算（元素大小）*/ ?Element Height = content Height(Height包含了元素内容宽度，边框宽度，内距宽度) ?Element Width = content Width(Width包含了元素内容宽度、边框宽度、内距宽度)box-sizing
语法
box-sizing: box-content | box-border | inherit
值
content-box
默认值，标准盒子模型。 width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。
注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;
尺寸计算公式：width = 内容的宽度，height =内容的高度。
宽度和高度都不包含内容的边框（border）和内边距（padding）。
border-box
这是当文档处于 Quirks模式时InternetExplorer使用的盒模型（IE6以下版本)。
width 和 height 属性包括内容，内边距和边框，但不包括外边距。
注意，填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。
这里的维度计算为：
width = border + padding + 内容的 width，
height = border + padding + 内容的 height。