css盒模型

今天我们来深入了解下盒子模型（Box Model），盒子模型是 CSS 的核心，现代 Web 布局设计简单说就是一堆盒子的排列与嵌套，掌握了盒子模型与它们的摆放控制，会发现再复杂的页面也不过如此。
下图就是一个典型的盒子模型示意图!

 在内容区外面，依次围绕着 padding 区，border 区，margin 区，这一模型结构在所有主流浏览器都是一致的。通过盒子模型，我们可以为我们的内容设置边界，留白以及边距，盒子模型最典型的应用是这样：我们有一段内容，可以为这段内容设置一个边框，为了让内容不至于紧挨着边框，可以设置 padding ，为了让这个盒子不至于和别的盒子靠得太紧，可以设置 margin。
到目前为止，一切都很完美，直到当我们想为这个盒子设置一个尺寸的时候，问题出现了。盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，这个不同解释表现在盒子的尺寸上。

从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。
　
从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 padding。
两种模型对元素尺寸计算：
===》W3C的标准Box Model: 标准浏览器（Firefox,Safari,Chrome,Opera,IE6+）

/外盒尺寸计算（元素空间尺寸）/
Element空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
/内盒尺寸计算（元素大小）/
Element Height = content height + padding + border （Height为内容高度）
Element Width = content width + padding + border （Width为内容宽度）

===》IE)传统下Box Model（IE6以下，不含IE6版本或“QuirksMode下IE5.5+”）:

/外盒尺寸计算（元素空间尺寸）/
Element空间高度 = content Height + margin (Height包含了元素内容宽度，边框宽度，内距宽度)
Element空间宽度 = content Width + margin (Width包含了元素内容宽度、边框宽度、内距宽度)
/内盒尺寸计算（元素大小）/
Element Height = content Height(Height包含了元素内容宽度，边框宽度，内距宽度)
Element Width = content Width(Width包含了元素内容宽度、边框宽度、内距宽度)

值未声明的情况:
如果未声明 padding 或者 border，那他们或者值为零(使用 css reset 时)，或者为浏览器的默认值(很可能不是零，尤其是那些通常没有重置的表单元素)。

选择“标准 w3c 盒子模型”:
若要选择“标准 w3c 盒子模型”，就在网页的顶部加上 doctype 声明。假如不加 doctype 声明，那么各个浏览器会根据自己的行为去理解网页，即 ie 浏览器会采用 ie 盒子模型去解释你的盒子，而 ff 会采用标准 w3c 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，假如加上了 doctype 声明，那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。

上面简单让大家对CSS的Box Model有了一个初步的概念，下面开始我们另一个知识——CSS3的Box-sizing。 
  语法： box-sizing ： content-box || border-box || inherit 

取值说明：
1、content-box:此值为其默认值，其让元素维持W3C的标准Box Model，也就是说元素的宽度/高度（width/height）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度/高度（content width/height）即：Element Width/Height = border+padding+content width/height。
2、border-box:此值让元素维持IE传统的Box Model（IE6以下版本），也就是说元素的宽度/高度等于元素内容的宽度/高度。（从上面Box Model介绍可知，我们这里的content width/height包含了元素的border,padding,内容的width/height【此处的内容宽度/高度=width/height-border-padding】）。

浏览器兼容：
box-sizing现代浏览器都支持，但IE家族只有IE8版本以上才支持，虽然现代浏览器支持box-sizing，但有些浏览器还是需要加上自己的前缀，Mozilla需要加上-moz-，Webkit内核需要加上-webkit-，Presto内核-o-,IE8-ms-，所以box-sizing兼容浏览器时需要加上各自的前缀：
/Content box/
Element {
-moz-box-sizing: content-box; /Firefox3.5+/
-webkit-box-sizing: content-box; /Safari3.2+/
-o-box-sizing: content-box; /Opera9.6/
-ms-box-sizing: content-box; /IE8/
box-sizing: content-box; /W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)/
}
/Border box/
Element {
-moz-box-sizing: border-box; /Firefox3.5+/
-webkit-box-sizing: border-box; /Safari3.2+/
-o-box-sizing: border-box; /Opera9.6/
-ms-box-sizing: border-box; /IE8/
box-sizing: border-box; /W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)/
}
box-sizing简单的例子：
HTML Code:

<div id="contentBox"><img src="/images/header.jpeg" alt="" /></div> <div id="borderBox"><img src="/images/header.jpeg" alt="" /></div>

CSS Code:

.imgBox img{
width: 140px;
height: 140px;
padding: 20px;
border: 20px solid orange;
margin: 10px;
}
#contentBox img{
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-o-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
}
#borderBox img{ -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

box-sizing运用的方面:
总结了一下，第一点就是我们布局上，第二点就是表单元素上。大家在平时布局中都有碰到当两个块元素的宽度刚好是其父元素总宽度时我们布局不会有任何问题，但当你在其中一个块加上padding或border时（哪怕是1px）整个布局就会完全打乱，因为其总宽度超过了父元素的宽度。第二点表单元素，前面我提到过，form有很多元素还是使用的IE传统Box Model，针对这两点，box-sizing将在其身上发挥强大的作用。