css假定每个元素都会生成一个或多个矩形框，这称为元素框。各元素框中心有一个内容区。这个内容区周围有可选的内边距，边框和外边距。这些项之所以被认为是可选的，原因是它们的宽度可以设置为0，实际上这样就从元素框去除了这些项。
在W3C传统css2.1盒模型中，通过声明width和height值来控制内容区域的宽度和高度，然后附加上内边距和边框等，这通常称为内容盒模型。
在css中盒模型被分为两种，第一种是W3C的标准模型，另一种是IE的传统模型，它们相同之处都是对元素计算尺寸的模型，不同之处是两者的计算方式不一样。
W3C的标准盒模型
外盒尺寸计算(元素空间尺寸)
element 空间高度 = 内容高度 + 内边距 + 边框 + 外边距element 空间宽度 = 内容宽度 + 内边距 + 边框 + 外边距
内盒尺寸计算(元素大小)
element 高度 = 内容高度 + 内边距 + 边框element 宽度 = 内容宽度 + 内边距 + 边框
IE传统盒模型(IE6以下，不包括IE6)
外盒尺寸计算(元素空间尺寸)
element 空间高度 = 内容高度(包括了height+padding+border) + 外边距element 空间宽度 = 内容宽度(包括了width+padding+border) + 内边距 + 边框 + 外边距
内盒尺寸计算(元素大小)
element 高度 = 内容高度(包括了height+padding+border)element 宽度 = 内容宽度(包括了height+padding+border)
换句话说，IE6以下版本其内容真正的宽度是width，padding，border。用内外盒来说，W3C标准浏览器的内容宽度等于IE6以下版本浏览器的内盒宽度。
box-sizing
前面讲到在IE传统盒模型下，边框和内边距都包含在宽度和高度内。而在标准的浏览器中，宽度和高度仅仅包含了内容宽度，除去了边框和内边距，这样就为web设计处理增添了很多麻烦。比如我们需要一个100px的元素，元素有10px的内边距，1px的边框，在W3C标准盒模型下就必须要做一番加减了，最后得出内容宽度为100-20-2=78px,而在IE传统盒模型下却只需要声明盒子内容等于100px，内边距与边框自动算在里面。为了解决这个问题，css3增添了一个盒模型属性box-sizing，能够事先定义盒模型的尺寸解析方式。
box-sizing:content-box | border-box | inherit
content-box:默认值，让元素维持W3C的标准盒模型。
border-box:此值会让元素维持IE传统盒模型。
inherit:此值使元素继承父元素的盒模型模式。
div{ width:100px; height:100px; background:hsla(360,50%,30%,0.5); padding:10px; border:10px solid red; box-sizing:content-box; } 胸无大志者，必受制于人
查看更多关于css3盒模型记_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did108661