一、概述
怪异盒子模型(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">