IE 盒模型和W3C盒模型

在CSS中有两种盒模型：

• IE盒模型的宽度是边框+padding+内容宽度
• W3C盒模型的宽度就是内容宽度

box-sizing属性可以设置元素应用哪一种盒模型。
浏览器兼容性：IE8及以上

一、IE盒模型

box-sizing：border-box;

以上CSS代码会使元素的盒模型为IE盒模型。

width 与 height 包括内边距（padding）与边框（border），不包括外边距（margin）。这是IE 怪异模式（Quirks mode）使用的 盒模型 。

这个时候内边距和边框将会包括在盒子中。

比如：

.box {
    width: 350px; 
    border: 10px solid black;
} 

浏览器渲染出的宽度将是350px。如果计算后的最内部的内容宽度为负值，都会被计算成0，内容还在，所以不可能通过border-box来隐藏元素。

尺寸计算公式：

width = border + padding + 内容的宽度
height = border + padding + 内容的高度。

二、W3C盒模型

box-sizing：content-box;

以上CSS代码会使元素的盒模型为W3C盒模型（其实元素的默认盒模型是W3C盒模型）。

元素width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。

注意: 内边距, 边框 & 外边距 都在这个盒子的外部。

比如

 .box {
      width: 350px；
      border: 10px solid black;
  }; 

那么在浏览器中的渲染的实际宽度将是370px。

尺寸计算公式：

width = 内容的宽度
height = 内容的高度

宽度和高度都不包含内容的边框（border）和内边距（padding）。