CSS 盒子模型

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

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/
层叠样式表

规格

层叠样式表 (CSS) 规范描述了图形浏览器如何显示网页元素。 在CSS1 规范中的第 4 节定义了“格式化模型“,它为块级元素(例如pblockquote )提供了宽度和高度,以及围绕它的三层框(填充、边框和边距)。 [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.0Internet 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 8WebKit浏览器(例如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-boxBootstrap框架中默认使用的盒子模型。

参考

  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. 
  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. 

外部链接