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. 

外部連結