css盒模型 Box model

如下图，盒模型从内到外包括content，Padding，Border，Margin。

盒模型有一个尺寸的计算公式，一般浏览器都遵循W3C的标准盒模型的计算公式，但是IE6以及以下版本的浏览器却有自己的盒模型定义，具体如下

W3C标准盒模型计算公式：

　　     /*外盒计算尺寸*/

　　　　Element空间高度 = content height + padding + border + margin

　　　　Element空间宽度 = content width + padding + border + margin

　　　　

　　　　/*内盒计算尺寸*/

　　　　Element空间高度 = content height + padding + border 

　　　　Element空间宽度 = content width + padding + border

 

IE6以及以下版本浏览器盒模型计算公式：

　　　　/*外盒计算尺寸*/

　　　　Element空间高度 = content height + margin

　　　　Element空间宽度 = content width + margin

 

　　　　/*内盒计算尺寸*/

　　　　Element空间高度 = content height (包含了content padding border)

　　　　Element空间宽度 = content width (包含了content padding border)

 

接下来，重点来了：在css中设置的width，指的是上面公式中的content width(同理，height也一样)；所以，ie6下的css设置的width，其实是包含了padding和border的宽度；但在其他浏览器中，css的width，不包含padding和border。

 

理清了盒模型，现在再来说一下CSS3中的属性box-sizing，这个属性有助于对盒模型的理解，

box-sizing：content-box 表示元素遵循W3C标准盒模型计算公式，即：css 的width不包括padding  border

box-sizing：border-box 表示元素遵循IE6以及以下版本浏览器盒模型计算公式，即：css 的width包括padding  border

 

　　　　

转载于:https://www.cnblogs.com/jeffreychen/p/4546141.html