CSS 盒模型 标准盒模型 IE盒模型

CSS盒模型定义了如何计算一个元素的总宽度和总高度，这是通过设置元素的padding, border, 和margin所影响的。

标准盒模型（W3C盒模型）：元素的宽度/高度 = 内容的宽度/高度 + 内边距 + 边框 + 外边距。

IE盒模型（IE传统盒模型）：元素的宽度/高度 = 内容的宽度/高度 + 外边距 - 边框 - 内边距。

在CSS中，可以通过设置box-sizing属性来指定使用哪种盒模型。

/* 标准盒模型 */
element {
  box-sizing: content-box;
}
 
/* IE盒模型 */
element {
  box-sizing: border-box;
}

在实际应用中，建议使用标准盒模型，因为它更符合直觉，并且能够避免一些布局上的混淆。在旧版本的IE浏览器中，如果需要使用IE盒模型，可以通过特定的IE语法来覆盖全局设置：

element {
  width: 100px;
  padding: 10px;
  border: 1px solid black;
  margin: 10px;
  box-sizing: content-box;
  -moz-box-sizing: content-box; /* Firefox */
  -webkit-box-sizing: content-box; /* Safari */
}

但是，现代浏览器已经基本实现了对标准盒模型的支持，而且推荐使用box-sizing: border-box;，这样可以避免在计算宽度和高度时产生混淆。