层叠样式表
* CSS動畫
* IE盒模型缺陷
* CSS filter
* 无表格网页设计
* 响应式网页设计
* 维基教科书

本模板：* 
* 讨论
* 编辑

层叠样式表
* CSS動畫
* IE盒模型缺陷
* CSS filter
* 无表格网页设计
* 响应式网页设计
* 维基教科书

本模板：* 
* 讨论
* 编辑

在Web 开发中， **CSS 盒子模型**是指如何在浏览器引擎中对 HTML 元素进行建模和如何从CSS属性导出 HTML 元素的尺寸。 盒模型的指导方针由 Web 标准万维网联盟 (W3C)特别是 CSS 工作组描述。在 20 世纪 90 年代末和 2000 年代初的多数时间里，主流浏览器中存在着不符合标准的盒模型的实现。直到1998 年CSS2的出现，引入了`box-sizing`属性，这个问题基本上才得到了解决。

规格
--

层叠样式表 (CSS) 规范描述了图形浏览器如何显示网页元素。 在CSS1 规范中的第 4 节定义了"格式化模型"，它为块级元素（例如`p`和`blockquote` ）提供了宽度和高度，以及围绕它的三层框（填充、边框和边距）。 虽然该规范从来没有明确的使用术语"盒模型"，但是在那个时候该术语已经被很多的 Web 开发人员和 Web 浏览器供应商广泛使用。

所有 HTML 元素都可以被视为"框"，其中包括`div`标签、 `p`标签或`a`标签。每个盒子都有五个可修改的尺寸：

* height和width是指盒子实际内容的尺寸（文本、图像……）
* padding是指该内容与框边框之间的空间
* border是指是围绕框的任何类型的线（实线、点线、虚线...）（如果存在
* margin是指是边框周围的空间

1996 年，W3C 成功发布，之后在1999 年，对 CSS1 规范进行了修订。当为任何块级元素显式特定的宽度或高度时，它只能确定可见元素的宽度或者高度、padding、border、以及随后应用的边距。  在 CSS3 发布之前，这种盒模型被称为**W3C 盒模型**，之后它又被称为`content-box` 。

框的总宽度可以被计算为为：`left-margin` + `left-border` + `left-padding` + `width` + `right-padding` + `right-border` + `right-margin` 。同样，盒子的总高度可以被计算为：`top-margin` + `top-border` + `top-padding` + `height` + `bottom-padding` + `bottom-border` + `bottom-margin`

例如，下面的 CSS 代码

```
.myClass {
 width: 200px;
 height: 100px;
 padding: 10px;
 border: solid 10px black;
 margin: 10px;
}

```
将指定属于"myClass"的每个块的盒子尺寸。此外，每个这样的盒子的总高度为 160像素，宽度为 260 像素。

CSS3 将**Internet Explorer 框模型**引入了标准，称为`border-box` 。

历史
--

 W3C 和 Internet Explorer 盒模型之间解释宽度的差异
在 HTML 4 和 CSS 之前，很少有 HTML 元素同时支持边框和填充，这导致了对元素宽度和高度的定义没有存在歧义。但是它因元素的不同而不同。表格的 HTML 宽度属性定义了表格的宽度（包括其边框）。 另一方面，图像的 HTML 宽度属性定义了图像本身（任何边框内）的宽度。 表格单元格是早期支持填充的唯一元素。单元格的宽度定义为"单元格内容的建议宽度（以像素为单位，不包括单元格填充）"。 

1996 年，CSS 为更多元素引入了边距、边框和填充。它采用了与内容、边框、边距和填充相关的定义宽度，类似于表格单元格的宽度。 此后这被称为*W3C 盒子模型*。

之前很少有浏览器供应商真正实现了 W3C 盒子模型。两大浏览器Netscape 4.0和Internet Explorer 4.0都将宽度和高度定义为一边框到一边框的距离。 这被称为*traditional Exporer*（也被称为*Internet Explorer 盒模型）*。 

"怪异模式"下的Internet Explorer包括指定宽度或高度内的内容、内边距和边框；与标准行为相比，这会导致框的渲染更窄或更短。 

因为早期版本的Internet Explorer处理盒模型或网页中元素大小的方式与W3C推荐的级联样式的标准方式有着不同的表格语言，所以*Internet Explorer 盒模型*行为被认为是一个错误。  从Internet Explorer 6开始，浏览器的支持替代呈现模式（也可以称为"标准兼容模式"）可以解决此差异。但是出于向后兼容性的原因，所有版本默认情况下仍然可以以非标准方式运行（请参阅怪异模式）。 Mac 版 Internet Explorer不受此非标准行为的影响。

如果页面包含某些HTML文档类型声明，则 Internet Explorer 版本6及更高版本不会受到该错误的影响。出于向后兼容性的原因，这些版本在怪异模式下保留了错误行为。 例如，触发怪异模式：

* 当文档类型声明不存在或不完整时；
* 当 HTML 遇到3或更早的文档；
* 当 HTML 4.0 使用过渡或框架集文档类型声明，并且不存在系统标识符 (URI)；
* 当文档类型声明之前出现 SGML 注释或其他无法识别的内容时
* IE浏览器 如果文档类型声明之前有XML声明，则 6 还使用怪异模式。

人们设计了各种解决方法来实现 Internet Explorer 版本 5 及更早版本使用 W3C 盒模型显示网页。这些解决方法通常利用 Internet Explorer 的 CSS 选择器处理没有关联的错误，对浏览器隐藏某些规则。在这些变通办法中，最著名的是由前 Microsoft 员工Tantek Çelik开发的"盒子模型破解"，这个想法的产生是Tantek Çelik在为 Macintosh 开发 Internet Explorer 时提出。它涉及为 Windows 版 Internet Explorer 指定宽度声明，然后使用 CSS 兼容浏览器的另一个宽度声明覆盖它。通过利用解析 CSS 规则的方式中的其他错误，对 Windows 版 Internet Explorer 隐藏。 Internet Explorer 的公开发布使这些 CSS"黑客"的实施变得更加复杂。不可否认的是，它修复了一些问题，但是仍有一些问题没有被改善，这也将导致使用这些黑客攻击的页面出现错误的结果。 

盒子模型已经被黑客证明是不可靠的，因为它们依赖于浏览器 CSS 支持中的错误，即使这些错误可能会在以后的版本中修复。所以一些 Web 开发人员提出为了避免相同的元素同时指定宽度和填充，或者使用条件注释或CSS 过滤器来解决旧版 Internet Explorer 中的框模型错误。

支持 Internet Explorer 的盒子模型
--------------------------

Web 设计师 Doug Bowman 提到：最初的 Internet Explorer 盒子模型代表了一种更好、更合乎逻辑的方法。  Peter-Paul Koch 给出了一个物理盒子的例子，它的尺寸始终指的是盒子本身，包括潜在的填充，但是绝对不涉及到内容的填充。 他说："这种盒子模型对于图形设计师来说更有用，他们根据盒子的可见宽度而不是内容的宽度来创建设计。"  Bernie Zimmermann 提到："Internet Explorer 盒模型更符合 HTML 表格模型中使用的单元格尺寸和填充的定义。" 

W3C 在 CSS3 中包含了"box-sizing"属性。当`box-sizing: border-box;`为元素指定后，所有的元素填充或边框都会在指定的宽度和高度内绘制，"如传统 HTML 用户代理通常实现的那样"。  Internet Explorer 8 、 WebKit浏览器（例如Apple Safari 5.1+ 和Google Chrome） 、基于 Gecko 的浏览器（例如Mozilla Firefox 29.0 及更高版本、 Opera 7.0 及更高版本以及Konqueror 3.3.2 及更高版本）支持 CSS3 box-sizing 属性。 29.0 之前的 Gecko 浏览器使用浏览器特定的`-moz-box-sizing`属性支持相同的功能。  `border-box`是Bootstrap框架中默认使用的盒子模型。

外部链接
----

* 万维网联盟 (W3C) 盒模型规范
* CSS 盒模型教程
* Tantek Çelik 对"盒子模型破解"的描述
* Internet Explorer 7 中的级联样式表兼容性– MSDN 文章，2006 年 7 月。
* Firefox 和 Internet Explorer 中的 CSS 框模型差异- Mozilla Firefox 和 Internet Explorer 之间的渲染差异的进一步说明。

|  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| 

| * 
* 论
* 编
（W3C） |
| --- |
|  |
| 產品及標準 | 

|  |  |
| --- | --- |
| 推薦 | 
* ActivityPub
* ARIA（英语：）
* Canonical XML
* CDF（英语：）
* 階層式樣式表
* 文档对象模型
* 地理位置API（英语：）
* HTML（HTML5）
* ITS（英语：）
* MathML
* OWL
* P3P
* PLS（英语：）
* RDF
* RDF Schema（英语：）
* 語音識別的語義解釋（英语：）
* SKOS
* SMIL
* SOAP
* Speech Recognition Grammar Specification（英语：）
* SSML
* 可縮放向量圖形
* SPARQL
* Timed text
* VoiceXML
* 网页存储
* WSDL
* XForms
* XHTML
* XHTML+RDFa（英语：）
* XInclude（英语：）
* XLink
* 可扩展标记语言
* XML Base
* XML Encryption
* XML Events（英语：）
* XML信息集
* XML命名空间
* XML Schema
* XML Signature
* XOP（英语：）
* XPath
* XPath 2.0（英语：）
* XPointer（英语：）
* XProc（英语：）
* XQuery（英语：）
* XSL
* XSL-FO
* XSLT（元素（英语：））

 |
|  |
| 记录 | 
* XAdES（英语：）
* XHTML+SMIL（英语：）
* XUP

 |
|  |
| 工作草案 | 
* CCXML（英语：）
* CURIE（英语：）
* EME
* InkML
* JSON-LD
* MSE
* RIF
* SCXML（英语：）
* SMIL時間表（英语：）
* sXBL（英语：）
* WICD（英语：）
* XFDL（英语：）
* XFrames（英语：）
* XBL
* XMLHttpRequest

 |
|  |
| 檢測 | 
* 無障礙網頁檢測

 |
|  |
| 倡議 | 
* 多通道交互活動（MMI）（英语：）
* 驗証服務
* 無障礙網頁倡議（英语：）
* 網絡平台（英语：）

 |
|  |
| 棄用 | 
* C-HTML
* HDML（英语：）
* JSSS（英语：）
* PGML（英语：）
* VML
* XHTML+MathML+SVG（英语：）

 |

 |
|  |
| 機構 | 

|  |
| --- |
| 
* 萬維網基金會（英语：）

 |
|  |
| 工作小組 | 
* SVG（英语：）
* CSS（英语：）
* HTML（英语：）
* WebOnt（語義網活動）（英语：）
* 設備描述（DDWG）（英语：）
* 網頁超文本技術工作小組（WHATWG）

 |

 |
|  |
| 軟件 | 

|  |
| --- |
| 
* CERN httpd
* Libwww

 |
|  |
| 瀏覽器 | 
* Line Mode （1990年－）
* Arena （1993年－1998年）
* Agora （1994年－1997年）（英语：）
* Argo （1994年－1997年）（英语：）
* Amaya （瀏覽器及編輯器，1996年－2012年）

 |

 |
|  |
| 會議 | 
* 國際萬維網大會（WWW大會）（英语：）
	+ 督導委員會（IW3C2）（英语：）
	+ 第一屆（WWW1，1994年）（英语：）

 |

 |