CSS：对盒模型的理解，以及CSS中如何设置盒模型来使浏览器辨别盒模型

1. 对盒模型的理解

盒模型有两种，分别是W3C定义的盒模型和IE定义的盒模型。

W3C定义的盒模型包括margin、padding、border、content，其中width = content
IE定义的盒模型与W3C盒模型的区别：width = content + padding + border
相比之下，IE盒模型较为合理。

2. CSS中如何设置这两种模型？

默认情况下，为W3C盒模型，可以通过CSS3的新属性box-sizing来设置。

W3C盒模型：box-sizing: content-box;
IE盒模型：box-sizing: border-box;

应用情景

当设置盒子大小，及padding或border时，一旦内容超出设置的大小，或者说超出父盒子，就会撑破父盒子，产生溢流。
若要通过控制盒子尺寸来解决，还需要计算把padding和border的值计算在内，相对较复杂，那么如何解决？

• 通过overflow属性设置，auto / hidden，内容隐藏通过滚动条显示 / 内容直接被隐藏；
• 改变盒模型，将盒模型设置为IE盒模型：box-sizing: border-box; 此时设置的width即包含content + padding + border.