CSS 盒子模型

维基百科，自由的百科全书
Box Model
CSS Box Model Module Level 3
The CSS box model
原文名称
CSS Box Model Module Level 3
状态W3C Candidate Recommendation Snapshot
最新版本Level 3
2020年12月22日 (2020-12-22)[1]
组织World Wide Web Consortium
委员会CSS Working Group
编辑
  • Elika J. Etemad[1]
  • Bert Bos[2]
  • Anton Prowse[2]
基础标准CSS
领域CSS
网站www.w3.org/TR/css-box-3/
层叠样式表
本模板：

在Web 开发中， CSS 盒子模型是指如何在浏览器引擎中对 HTML 元素进行建模和如何从CSS属性导出 HTML 元素的尺寸。 [3]盒模型的指导方针由 Web 标准万维网联盟 (W3C)特别是 CSS 工作组描述。在 20 世纪 90 年代末和 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. ^ 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. ^ 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= (帮助)
  3. ^ CSS. MDN Web Docs. 2019-03-23 [30 March 2019]. （原始内容存档于2019-08-18）. 
  4. ^ 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）. 
  5. ^ Håkon Wium Lie; Bert Bos. Cascading Style Sheets, level 1. World Wide Web Consortium. 17 December 1996 [2006-12-09]. （原始内容存档于2010-05-27）. 
  6. ^ Peter-Paul Koch. CSS – box-sizing. quirksmode.org. 2013 [30 March 2019]. （原始内容存档于2023-09-30）. 
  7. ^ Raggett, Dave. The HTML3 Table Model. World Wide Web Consortium. 23 January 1996 [26 October 2017]. （原始内容存档于2023-07-03）. 
  8. ^ 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）. 
  9. ^ Raggett, Dave. HTML 3.2 Reference Specification. World Wide Web Consortium. 14 January 1997 [26 October 2017]. （原始内容存档于2018-02-03）. 
  10. ^ Wium Lie, Håkon; Bos, Bert. Cascading Style Sheets, level 1. World Wide Web Consortium. 17 December 1996 [26 October 2017]. （原始内容存档于2023-10-16）. 
  11. ^ Wium Lie, Håkon; Bos, Bert. Cascading Style Sheets, level 1. World Wide Web Consortium. 17 December 1996 [26 October 2017]. （原始内容存档于1997-07-26）. 
  12. ^ Koch, Peter-Paul. Box model tweaking. XS4ALL. [26 October 2017]. （原始内容存档于2022-03-18）. 
  13. ^ 13.0 13.1 Koch, Peter-Paul. CSS – box-sizing. QuirksMode. [26 October 2017]. （原始内容存档于2023-09-30）. 
  14. ^ 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）. 
  15. ^ Lance Silver. CSS Enhancements in Internet Explorer 6. Microsoft Developer Network. Microsoft. March 2001 [2007-06-24]. （原始内容存档于2007-07-01）. 
  16. ^ Shafer, Dan. HTML Utopia: Designing Without Tables Using CSS. Melbourne: Sitepoint. 2005: 124 & Appendix C. ISBN 0-9579218-2-9. 
  17. ^ Shea, David; Molly E. Holzschlag. The Zen of CSS Design. Berkeley: Peachpit Press. 2005. ISBN 0-321-30347-4.  author-name-list parameters只需其一 (帮助)
  18. ^ 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）. 
  19. ^ !DOCTYPE. Microsoft Developer Network. Microsoft. [2007-01-13]. （原始内容存档于2008-05-06）. 
  20. ^ Arve Bersvendsen. Hack-free CSS for IE. Arve Bersvendsen's weblog. February 2004 [2007-01-16]. （原始内容存档于15 January 2007）. 
  21. ^ Vorsprung durch Webstandards | Douglas Bowman declares his love to CSS. Vorsprungdurchwebstandards.de. [2010-07-07]. （原始内容存档于2010-06-14）. 
  22. ^ Vorsprung durch Webstandards | Peter-Paul Koch declares his love to CSS. Vorsprungdurchwebstandards.de. [2010-07-07]. （原始内容存档于2010-02-27）. 
  23. ^ Box Model Enlightenment, Bernie Zimmermann. Bernzilla.com. 4 April 2003 [2010-07-07]. （原始内容存档于27 December 2010）. 
  24. ^ CSS3 Basic User Interface Module. World Wide Web Consortium. [2023-10-12]. （原始内容存档于2010-12-01）. 
  25. ^ -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. 

外部链接

產品及
標準
推薦
记录
工作草案
檢測
倡議
棄用
機構
工作小組
軟件
瀏覽器
會議
取自“https://zh.wikipedia.org/w/index.php?title=CSS_盒子模型&oldid=79456434”