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。
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:此值使元素继承父元素的盒模型模式。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
width:100px;
height:100px;
background:hsla(360,50%,30%,0.5);
padding:10px;
border:10px solid red;
box-sizing:content-box;
}
</style>
</head>
<body>
<div>sldfkdslml</div>
</body>
</html>
结果：总宽度为100+20+20=140px
如改为：
div{
width:100px;
height:100px;
background:hsla(360,50%,30%,0.5);
padding:10px;
border:10px solid red;
box-sizing:border-box;
}
结果：总宽度为100px（内边距和边框包含在内部）
在IE传统盒模型(border-box)下，盒子大小不变。
IE6以下版本对盒模型的解析模式虽然不符合W3C的标准规范，但这种方式并不是一无是处，它也有好的一面：不管如果修改元素的边框或者内边距大小，都不会影响元素盒子的总尺寸，也就不会打乱页面的整体布局。而在标准浏览器下，按照W3C规范对盒模型的解析，一旦修改了元素的边框或者内边距，就会影响元素的盒子尺寸，也就不得不重新计算元素的盒子尺寸，从而影响到整个页面的布局。