CSS盒模型

盒模型CSS Box Model Module Level 3CSS盒模型原文名称CSS Box Model Module Level 3状态W3C Candidate Recommendation Snapshot最新版本Level 32020年12月22日 (2020-12-22)[1]组织万维网联盟委员会CSS Working Group编辑

Elika J. Etemad[1]

Bert Bos[2]

Anton Prowse[2]

基础标准CSS领域CSS网站www.w3.org/TR/css-box-3/

层叠样式表

CSS動畫

CSS盒模型

CSS濾器

无表格网页设计

响应式网页设计

维基教科书

本模板：查看讨论编辑

CSS

样式表

CSS Zen Garden（英语：CSS Zen Garden）

概念

CSS动画

CSS濾器

CSS盒模型

IE盒模型缺陷

image replacement（英语：CSS image replacement）

CSS Flexible Box布局

grid（英语：CSS grid layout）

原理

無表格網頁設計

回應式網頁設計

Holy grail（英语：Holy grail (web design)）

工具

Sass

Less (层叠样式表)

Stylus（英语：Stylus (stylesheet language)）

比較

樣式語言比較（英语：Comparison of stylesheet languages）

分類

維基教科書查论编

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

规格[编辑]

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

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

height和width是指盒子实际内容的尺寸（文本、图像……）

padding是指该内容与框边框之间的空间

border是指是围绕框的任何类型的线（实线、点线、虚线...）（如果存在

margin是指是边框周围的空间

1996 年，W3C 成功发布，之后在1999 年，对 CSS1 规范进行了修订。当为任何块级元素显式特定的宽度或高度时，它只能确定可见元素的宽度或者高度、padding、border、以及随后应用的边距。 [4] [5]在 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 。 [6]

历史[编辑]

W3C 和 Internet Explorer盒模型之间解释宽度的差异

在 HTML 4 和 CSS 之前，很少有 HTML 元素同时支持边框和填充，这导致了对元素宽度和高度的定义没有存在歧义。但是它因元素的不同而不同。表格的 HTML 宽度属性定义了表格的宽度（包括其边框）。 [7]另一方面，图像的 HTML 宽度属性定义了图像本身（任何边框内）的宽度。 [8]表格单元格是早期支持填充的唯一元素。单元格的宽度定义为“单元格内容的建议宽度（以像素为单位，不包括单元格填充）”。 [9]

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

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

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

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

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

当文档类型声明不存在或不完整时；

当 HTML 遇到3或更早的文档；

当 HTML 4.0 使用过渡或框架集文档类型声明，并且不存在系统标识符 (URI)；

当文档类型声明之前出现 SGML 注释或其他无法识别的内容时

IE浏览器 如果文档类型声明之前有XML声明，则 6 还使用怪异模式。 [19]

人们设计了各种解决方法来实现 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“黑客”的实施变得更加复杂。不可否认的是，它修复了一些问题，但是仍有一些问题没有被改善，这也将导致使用这些黑客攻击的页面出现错误的结果。 [18]

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

支持Internet Explorer的盒模型[编辑]

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

W3C 在 CSS3 中包含了“box-sizing”属性。当box-sizing: border-box;为元素指定后，所有的元素填充或边框都会在指定的宽度和高度内绘制，“如传统 HTML 用户代理通常实现的那样”。 [24] 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属性支持相同的功能。 [25] border-box是Bootstrap框架中默认使用的盒模型。

参考[编辑]

^ 1.0 1.1 Etemad, Elika J. (编). CSS Box Model Module Level 3. W3C. Level 3. CSS Working Group. 2020-12-22 [2021-04-09]. （原始内容存档于2023-10-20）. 已忽略未知参数|collaboration= (帮助)

^ 2.0 2.1 Bos, Bert; Prowse, Anton (编). CSS Basic Box Model Level 3. W3C. 31 July 2018. CSS Working Group. 2018-07-06 [2021-04-09]. （原始内容存档于2023-10-19）. 已忽略未知参数|collaboration= (帮助)

^ CSS. MDN Web Docs. 2019-03-23 [30 March 2019]. （原始内容存档于2019-08-18）.

^ 4.0 4.1 Wium Lie, Håkon; Bos, Bert. Cascading Style Sheets, level 1 § Formatting model. World Wide Web Consortium. 11 January 1999 [26 October 2017]. （原始内容存档于2014-04-09）.

^ Håkon Wium Lie; Bert Bos. Cascading Style Sheets, level 1. World Wide Web Consortium. 17 December 1996 [2006-12-09]. （原始内容存档于2010-05-27）.

^ Peter-Paul Koch. CSS – box-sizing. quirksmode.org. 2013 [30 March 2019]. （原始内容存档于2023-09-30）.

^ Raggett, Dave. The HTML3 Table Model. World Wide Web Consortium. 23 January 1996 [26 October 2017]. （原始内容存档于2023-07-03）.

^ Raggett, Dave; Le Hors, Arnaud; Jacobs, Ian. 13 Objects, Images, and Applets § Width and height. World Wide Web Consortium. 24 December 1999 [26 October 2017]. （原始内容存档于2023-08-02）.

^ Raggett, Dave. HTML 3.2 Reference Specification. World Wide Web Consortium. 14 January 1997 [26 October 2017]. （原始内容存档于2018-02-03）.

^ Wium Lie, Håkon; Bos, Bert. Cascading Style Sheets, level 1. World Wide Web Consortium. 17 December 1996 [26 October 2017]. （原始内容存档于2023-10-16）.

^ Wium Lie, Håkon; Bos, Bert. Cascading Style Sheets, level 1. World Wide Web Consortium. 17 December 1996 [26 October 2017]. （原始内容存档于1997-07-26）.

^ Koch, Peter-Paul. Box model tweaking. XS4ALL. [26 October 2017]. （原始内容存档于2022-03-18）.

^ 13.0 13.1 Koch, Peter-Paul. CSS – box-sizing. QuirksMode. [26 October 2017]. （原始内容存档于2023-09-30）.

^ 14.0 14.1 Johansson, Roger. Internet Explorer and the CSS box model. 456 Berea Street. 21 December 2006 [26 October 2017]. （原始内容存档于2008-11-07）.

^ Lance Silver. CSS Enhancements in Internet Explorer 6. Microsoft Developer Network. Microsoft. March 2001 [2007-06-24]. （原始内容存档于2007-07-01）.

^ Shafer, Dan. HTML Utopia: Designing Without Tables Using CSS. Melbourne: Sitepoint. 2005: 124 & Appendix C. ISBN 0-9579218-2-9.

^ Shea, David; Molly E. Holzschlag. The Zen of CSS Design. Berkeley: Peachpit Press. 2005. ISBN 0-321-30347-4.

^ 18.0 18.1 Markus Mielke. Cascading Style Sheet Compatibility in Internet Explorer 7. Microsoft Developer Network. Microsoft. 26 September 2006 [2007-06-24]. （原始内容存档于2007-06-29）.

^ !DOCTYPE. Microsoft Developer Network. Microsoft. [2007-01-13]. （原始内容存档于2008-05-06）.

^ Arve Bersvendsen. Hack-free CSS for IE. Arve Bersvendsen's weblog. February 2004 [2007-01-16]. （原始内容存档于15 January 2007）.

^ Vorsprung durch Webstandards | Douglas Bowman declares his love to CSS. Vorsprungdurchwebstandards.de. [2010-07-07]. （原始内容存档于2010-06-14）.

^ Vorsprung durch Webstandards | Peter-Paul Koch declares his love to CSS. Vorsprungdurchwebstandards.de. [2010-07-07]. （原始内容存档于2010-02-27）.

^ Box Model Enlightenment, Bernie Zimmermann. Bernzilla.com. 4 April 2003 [2010-07-07]. （原始内容存档于27 December 2010）.

^ CSS3 Basic User Interface Module. World Wide Web Consortium. [2023-10-12]. （原始内容存档于2010-12-01）.

^ -moz-box-sizing. Mozilla Developer Center. Mozilla. 11 April 2009 [2009-04-11]. （原始内容存档于2010-06-26）. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.

外部链接[编辑]

万维网联盟 (W3C)盒模型规范 （页面存档备份，存于互联网档案馆）

CSS盒模型教程 （页面存档备份，存于互联网档案馆）

Tantek Çelik 对“盒模型破解”的描述 （页面存档备份，存于互联网档案馆）

Internet Explorer 7 中的级联样式表兼容性 （页面存档备份，存于互联网档案馆）– MSDN 文章，2006 年 7 月。

Firefox 和 Internet Explorer 中的 CSS 框模型差异- Mozilla Firefox 和 Internet Explorer 之间的渲染差异的进一步说明。

查论编万维网联盟（W3C）產品及標準推薦

ActivityPub

Activity Streams（英语：Activity Streams (format)）

ARIA（英语：WAI-ARIA）

Canonical XML

CDF（英语：Compound Document Format）

階層式樣式表

CSS動畫

CSS盒模型

CSS Flexible Box布局

CSS Grid 布局（英语：CSS grid layout）

文档对象模型

地理位置API（英语：W3C Geolocation API）

HTML

HTML5

Indexed Database API

ITS（英语：Internationalization Tag Set）

JSON-LD（英语：JSON-LD）

Linked Data Notifications（英语：Linked Data Notifications）

MathML

Micropub（英语：Micropub (protocol)）

OWL

P3P

PLS（英语：Pronunciation Lexicon Specification）

RDF

RDF Schema（英语：RDF Schema）

語音識別的語義解釋（英语：Semantic Interpretation for Speech Recognition）

SISR（英语：Semantic Interpretation for Speech Recognition）

SKOS

SMIL

SOAP

SRGS（英语：Speech Recognition Grammar Specification）

SRI（英语：Subresource Integrity）

SSML

可縮放向量圖形

SVG 濾鏡（英语：SVG filter effects）

SCXML（英语：SCXML）

SHACL（英语：SHACL）

SPARQL

Timed text

VoiceXML

WoT（英语：Web of Things）

TD（英语：Thing Description）

网页存储

WSDL

XForms

XHTML

XHTML+RDFa（英语：XHTML+RDFa）

XInclude（英语：XInclude）

XLink

可扩展标记语言

XML Base

XML Encryption

XML Events（英语：XML Events）

XML信息集

XML命名空间

XML Schema

XML Signature

XOP（英语：XML-binary Optimized Packaging）

XPath

XPath 2.0（英语：XPath 2.0）

XPointer（英语：XPointer）

XProc（英语：XProc）

XQuery（英语：XQuery）

XSL

XSL-FO

XSLT

元素（英语：XSLT elements）

记录

IndieAuth（英语：IndieAuth）

XAdES（英语：XAdES）

XHTML+SMIL（英语：XHTML+SMIL）

XUP

工作草案

CCXML（英语：Call Control eXtensible Markup Language）

CURIE（英语：CURIE）

EME

InkML

JSON-LD（英语：JSON-LD）

MSE

RIF

SCXML（英语：SCXML）

SMIL時間表（英语：SMIL Timesheets）

sXBL（英语：sXBL）

WICD（英语：Web Integration Compound Document）

XFDL（英语：Extensible Forms Description Language）

XFrames（英语：XFrames）

XBL

XMLHttpRequest

檢測

無障礙網頁檢測

倡議

多通道交互活動（MMI）（英语：W3C MMI）

驗証服務

無障礙網頁倡議（英语：Web Accessibility Initiative）

網絡平台

棄用

C-HTML

HDML（英语：Handheld Device Markup Language）

JSSS（英语：JavaScript Style Sheets）

PGML（英语：Precision Graphics Markup Language）

VML

XHTML+MathML+SVG（英语：XHTML+MathML+SVG）

機構

萬維網基金會（英语：World Wide Web Foundation）

工作小組

SVG（英语：SVG Working Group）

CSS（英语：CSS Working Group）

HTML（英语：HTML Working Group）

WebOnt（語義網活動）（英语：WebOnt）

設備描述（DDWG）（英语：W3C Device Description Working Group）

網頁超文本技術工作小組（WHATWG）

軟件

CERN httpd

Libwww

瀏覽器

Line Mode （1990年－）

Arena （1993年－1998年）

Agora （1994年－1997年）（英语：Agora (web browser)）

Argo （1994年－1997年）（英语：Argo (web browser)）

Amaya （瀏覽器及編輯器，1996年－2012年）

會議

國際萬維網大會（WWW大會）（英语：International World Wide Web Conference）

督導委員會（IW3C2）（英语：International World Wide Web Conferences Steering Committee）

第一屆（WWW1，1994年）（英语：First International Conference on the World-Wide Web）