html怪异盒模型,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代码：