前端面试题——盒模型/怪异盒模型

标准盒模型

在标准盒模型下，width和height是内容区域，即使content的width和height，不包括padding和border。
所以，此时，一个块的总宽度 = width + padding + border + margin （都包含左右）

怪异盒模型

在怪异盒模型下，width和height除了内容区域外，还包括padding和border。
所以，此时，一个块的总宽度 = width+margin（都包含左右，此时的width包括了padding和border）

应用

1. 在文档首部添加 doctype声明，就是使用了 标准盒模型，
2. 不加，由浏览器自己决定。
3. 当用编辑器新建一个html页面时，顶部都会有一个DCOTYPE标签，不定义，会触发怪异模式。

扩

1.css3的box-sizing语法

• box-sizing:content-box || border-box || inherit || initial
• 当 content-box时，采用标准模式，即默认样式
• 当 border-box时，采用怪异模式。