一、概述
怪异盒子模型（Quirks mode）是指浏览器解析 HTML 文件时，如果其文档类型声明不规范或者没有声明，浏览器会启用一种怪异模式进行解析，此时网页渲染可能会与标准模式下的渲染有较大的差异。
在怪异盒子模型下，浏览器会使用自己的特定算法为 DOM 元素计算宽度和高度，这种计算方式与标准盒子模型存在较大的差别，称之为怪异盒子模型。
二、怪异盒子模型特点
1. 怪异模式下，盒子的宽度和高度会被浏览器计算成内容宽度和高度，不会考虑 padding 和 border 的尺寸。
/* HTML */
<div id="demo">
<p>Hello World</p>
</div>
/* CSS */
#demo {
padding: 20px;
border: 10px solid #000;
}
在怪异盒子模型下，#demo 元素的宽度为 p 元素内容的宽度，不包括 padding 和 border 的尺寸。
2. 相邻元素之间如果没有空格，margin 会重叠，造成布局的不稳定性。
/* HTML */
<div class="demo">原创文章，作者：NMZHL，如若转载，请注明出处：https://www.506064.com/n/334958.html
微信扫一扫 
支付宝扫一扫 