CSS-标准盒模型&怪异盒模型

盒模型一共有两种模式：W3C标准模式和IE怪异模式
大多数浏览器采用W3C标准模式，IE采用自己的标准
当用编辑器新建一个html页面的时候最顶上都会有一个DOCTYPE标签，不定义DOCTYPE，会触发怪异模式

在标准模式下，一个块的宽度 = width + padding(左右) + border(左右) + margin(左右)
在怪异模式下，一个块的宽度 = width + margin(左右)
即
标准盒模型：width、height只包含content内容区
怪异盒模型：width、height包含content、padding、border

标准盒模型.png

IE盒模型.png

CSS3的box-sizing

box-sizing语法：
box-sizing: content-box || border-box || inherit || initial

当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；

来看一个例子，有一个width和height为200px，padding为10px的div（标准盒模型），div里有input输入框，input的width为100%，padding为5px。
如果input不设置box-sizing:border-box，input的宽度 = width + padding(左右)，width为200px，宽度将会超出div的内容区；

不设置box-sizing.png

如果设置了box-sizing:border-box，input的宽度 = 200px（包含width和padding）

设置box-sizing.png

相关样式如下所示：
#div{
width: 200px;
height: 200px;
border: 1px solid;
background: aqua;
padding: 10px;
}
#input{
width: 100%;
border: 10px solid;
padding: 5px;
box-sizing:border-box;
}
html代码：

参考文献：
http://blog.csdn.net/dong_pt/article/details/51281372
http://www.bbs0101.com/archives/98.html