您的位置:

怪异盒子模型

一、概述

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