盒模型主要分析块级元素,对应CSS属性box-sizing。盒模型分为两种:
- W3C标准模型
- IE标准模型
怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”,怪异模式主要表现在IE内核的浏览器。
当不对doctype进行定义时,会触发怪异模式。
W3C标准模型
一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
IE标准模型
一个块的总宽度= width + margin(左右)(即width已经包含了padding和border值)
box-sizing: content-box
此时采用W3C标准模型进行计算
box-sizing: border-box
此时采用IE标准模型进行计算