标准盒模型（w3c标准）所有的HTML元素都可以看作是盒。在CSS中，术语“盒子模型”用于设计和布局。CSS盒模型本质上是一个封装周围HTML元素的盒子，它包括：边距、边框、填充和实际内容。在标准盒模型中，宽度和高度指的是内容区域的宽度和高度。增加填充、边框和边距不会影响内容区域的大小，但会增加元素框的整体大小。在标准盒模型中：盒占width=width+2margin+2padding+2*border，高度相同。框的真实宽度=width+2padding+2border。保证金不算数！margin可以改变盒子的大小，但是盒子的宽高没有变，只是位置变了！根据W3C规范，一个元素的内容所占的空间由width属性设置，而内容周围的padding和border值是单独计算的。不幸的是，IE5.X和6在quirks模式下使用它们自己的非标准模型。这些浏览器的宽度属性不是内容的宽度，而是内容宽度、padding和border的总和。奇怪的盒子模型即盒子模型的内容部分包括边框和填充。要让网页按照标准的盒子模型解析，需要添加doctype声明，否则不同的浏览器会按照自己的标准解析。box-sizingbox-sizing属性允许您以特定方式定义特定元素以适应指定区域。例如，如果您需要并排放置两个带边框的框，您可以通过将box-sizing设置为“border-box”来实现。这会导致浏览器呈现一个具有指定宽度和高度的框，并将边框和填充放在框内。box-sizing类似于ieboxmodel，它将包括padding和borders的宽度。在实际工作中，我们设置了一个固定宽度的盒子，但是当给它设置padding和border时，它的真实宽度会发生变化。这就是box-sizing派上用场的地方。它会自动调整内容的宽度，保证盒子的真实宽度仍然是我们设置的宽度。可以查看实例：box-sizinginstance
