CSS核心概念之盒子模型

逃跑的火焰

盒子模型(Box Model)

下面的图片说明了盒子模型（Box Model）：

CSS 盒模型不同组成部分的说明：

• Content（内容） - 由内容边界限制，容纳着元素的“真实”内容，例如文本、图像，或是一个视频播放器。
• Padding（内边距） - 由内边距边界限制，扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框的间距。当其取值为百分比时，该百分比都是相对于包含该元素的块的宽度（相对于该块的百分比）。
• Border（边框） - 由边框边界限制，扩展自内边距区域，是容纳边框的区域。即围绕在内边距和内容外的边框。
• Margin（外边距） - 由外边距边界限制，用空白区域扩展边框区域，以分开相邻的元素。当其取值为百分比时，该百分比都是相对于包含该元素的块的宽度（相对于该块的百分比）。
  

标准盒模型与怪异盒模型

盒子模型分为两种：第一种是 W3C 标准的盒子模型（标准盒模型） 、第二种 IE 标准的盒子模型（怪异盒模型）。

当前大部分的浏览器支持的是 W3C 的标准盒模型，也保留了对怪异盒模型的支持，当然 IE 浏览器沿用的是怪异盒模型。怪异模式是“部分浏览器在支持 W3C 标准的同时还保留了原来的解析模式”，怪异模式主要表现在 IE 内核的浏览器。

标准盒模型与怪异盒模型的表现效果的区别：

• 标准盒模型中 width 指的是内容（Content）区域的宽度；height 指的是内容（Content）区域的高度。标准盒模型下盒子的大小 = width + Border + Padding + Margin。
• 怪异盒模型中的 width 指的是内容（Content）、边框（Border）、内边距（Padding）总和的宽度，即 width = Content + Border + Padding；height 指的是内容（Content）、边框（Border）、内边距（Padding）总和的高度。怪异盒模型下盒子的大小 =width + Margin
  

注意：W3C 的标准盒模型和IE 怪异盒模型主要区别是：盒模型中的 width 是否包含 border 和 padding。W3C 的标准盒模型的 width 不包含 border 和 padding，而IE 怪异盒模型的 width 中包含 border 和 padding。

浏览器如何解析盒模型

如果是定义了完整的 doctype 的标准文档类型，无论是哪种模型情况，最终都会触发标准模式，如果 doctype 协议缺失，会由浏览器自己界定，在 IE 浏览器中 IE9 以下（IE6、IE7、IE8）的版本触发怪异模式，其他浏览器中会默认为 W3C标准模式。

设置盒模型解析模式

我们还可以通过设置 HTML 元素的 box-sizing 来设置盒子模型的解析模式

box-sizing 的属性值：

• content-box： 默认值，border 和padding 不算到 width 范围内，可以理解为是 W3C 的标准模型
• border-box：border 和 padding 划归到 width 范围内，可以理解为是 IE 的怪异盒模型
• padding-box：将 padding 算入 width 范围
  

当设置为 box-sizing: content-box 时，将采用标准模式解析计算（默认模式），当设置为 box-sizing: border-box 时，将采用怪异模式解析计算。如：

[url=]

[AppleScript] 纯文本查看 复制代码

<!-- 将 div 设置为怪异盒模型解析模式 -->
<div style="box-sizing: border-box;"></div>

[/url]


[url=]

关于更多CSS核心概念的文章请关注GitHub——CSS核心概念。

[/url]