Content deleted Content added
m Task 18 (cosmetic): eval 24 templates: del empty params (3×); hyphenate params (12×); del |url-status= (1×); |
m Deduplicate reference |
||
| (14 intermediate revisions by 11 users not shown) | |||
Line 1:
{{Short description|Model used for styling websites}}
{{Use dmy dates|date=July 2019}}
{{multiple issues|
{{primary sources|date=September 2017}}
{{more citations needed|date=September 2017}}
{{update|date=October 2017}}
}}
{{Infobox technology standard
| title = Box Model
| long_name = CSS Box Model Module Level 3
| native_name = CSS Box Model Module Level 3
| native_name_lang = en
| image = Boxmodell-detail.png
| caption = The CSS box model
| status = W3C Candidate Recommendation Snapshot
| year_started = <!-- {{Start date|YYYY|MM|DD|df=y}} -->
| first_published = <!-- {{Start date|YYYY|MM|DD|df=y}} -->
| version = Level 3
| version_date = {{Start date|2020|12|22}}<ref name="w3c-level-3">{{Cite web|url=https://www.w3.org/TR/css-box-3/|title=CSS Box Model Module Level 3|website=W3C|publisher=CSS Working Group|collaboration=CSS Working Group|version=Level 3|date=2020-12-22|access-date=2021-04-09
|editor-first1=Elika J.|editor-last1=Etemad
}}</ref>▼
| preview =
| preview_date =
| organization = [[World Wide Web Consortium]]
| committee = CSS Working Group
| editors = {{Plainlist|
* Elika J. Etemad<ref name="w3c-level-3" />
* Bert Bos<ref name="w3c-level-3-draft-2018-07-06">{{Cite web|url=https://www.w3.org/TR/2018/WD-css3-box-20180731/|title=CSS Basic Box Model Level 3|website=W3C|publisher=CSS Working Group|collaboration=CSS Working Group|version=31 July 2018|date=2018-07-06|access-date=2021-04-09
|editor-first1=Bert|editor-last1=Bos
|editor-first2=Anton|editor-last2=Prowse}}</ref>
* Anton Prowse<ref name="w3c-level-3-draft-2018-07-06" />
}}
| authors =
| base_standards = [[CSS]]
| related_standards =
| abbreviation =
| ___domain = [[CSS]]
| license =
| website = {{URL|https://www.w3.org/TR/css-box-3/}}
}}
{{CSS}}
In [[web development]], the '''CSS box model''' refers to how HTML elements are modeled in [[browser engine]]s and how
| title =
| work = MDN Web Docs
| date = 2019-03-23
| access-date = 30 March 2019
| url = https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model
}}</ref> The guidelines of the box model are described by web standards [[World Wide Web Consortium|World Wide Web Consortium (W3C)]] specifically the CSS Working Group. For much of the late-1990s and early 2000s there had been non-standard compliant implementations of the box model in
==Specifics==
Line 44 ⟶ 76:
would specify the box dimensions of each block belonging to 'myClass'. Moreover, each such box will have total height 160[[Pixel|px]] and width 260px.
CSS3 introduced the '''Internet Explorer box model''' to the standard, known referred to as <code>border-box</code>.<ref name="CSS2 - Box model tweaking">{{
▲}}</ref>
==History==
Line 61 ⟶ 86:
In 1996, CSS<ref>{{cite web |url=https://www.w3.org/TR/CSS1/ |title=Cascading Style Sheets, level 1 |last1=Wium Lie |first1=Håkon |author-link1=Håkon Wium Lie |last2=Bos |first2=Bert |author-link2=Bert Bos |date=17 December 1996 |publisher=[[World Wide Web Consortium]] |access-date=26 October 2017}}</ref> introduced margin, border and padding for many more elements. It adopted a definition width in relation to content, border, margin and padding similar to that for a table cell.<ref>{{cite web |url=https://www.w3.org/TR/REC-CSS1-961217 |title=Cascading Style Sheets, level 1 |last1=Wium Lie |first1=Håkon |author-link1=Håkon Wium Lie |last2=Bos |first2=Bert |author-link2=Bert Bos |date=17 December 1996 |publisher=[[World Wide Web Consortium]] |access-date=26 October 2017}}</ref> This has since become known as the ''W3C box model''.
At the time, very few browser vendors implemented the W3C box model to the letter. The two major browsers at the time, [[Netscape Communicator|Netscape 4.0]] and [[Internet Explorer 4
[[Internet Explorer]] in "[[quirks mode]]" includes the content, padding and borders within a specified width or height; this results in a narrower or shorter rendering of a box than would result following the standard behavior.<ref>{{Cite web| url=http://msdn2.microsoft.com/en-us/library/bb250395.aspx#cssenhancements_topic3 | title=CSS Enhancements in Internet Explorer 6 | author=Lance Silver |date=March 2001 | publisher=[[Microsoft]] | work=[[Microsoft Developer Network]] | access-date=2007-06-24}}</ref>
Line 69 ⟶ 94:
===Workarounds===
Internet Explorer versions [[Internet Explorer 6|6]] and onward are not affected by the bug if the page contains certain [[HTML]] [[document type declaration]]s. These versions maintain the buggy behavior when in [[quirks mode]] for reasons of backward compatibility.<ref name="msdn IE7 blog">{{Cite web|url=http://msdn2.microsoft.com/en-us/library/bb250496.aspx | title=Cascading Style Sheet Compatibility in Internet Explorer 7 | access-date=2007-06-24 | author=Markus Mielke | date=26 September 2006 | publisher=[[Microsoft]] |work=[[Microsoft Developer Network]] }} "Pages authored under non-strict mode (quirks) will not change behavior in IE7 and will not be affected by broken CSS filters.Pages authored under non-strict mode (or "quirks mode") will not change behavior in IE7."</ref> For example, quirks mode is triggered:
* When the [[Document Type Declaration|document type declaration]] is absent or incomplete;
* When an HTML 3 or earlier document is encountered;
Line 78 ⟶ 102:
Various workarounds have been devised to force Internet Explorer versions 5 and earlier to display Web pages using the W3C box model. These workarounds generally exploit unrelated bugs in Internet Explorer's CSS selector processing in order to hide certain rules from the browser. The best known of these workarounds is the "box model hack" developed by [[Tantek Çelik]], a former Microsoft employee who developed this idea while working on Internet Explorer for the Macintosh. It involves specifying a width declaration for Internet Explorer for Windows, and then overriding it with another width declaration for CSS-compliant browsers. This second declaration is hidden from Internet Explorer for Windows by exploiting other bugs in the way that it parses CSS rules. The implementation of these CSS "hacks" has been further complicated by the public release of Internet Explorer 7, which has had some issues fixed, but not others, causing undesired results in pages using these hacks.<ref name="msdn IE7 blog"/>
Box model hacks have proven unreliable because they rely on bugs in browsers' CSS support that may be fixed in later versions. For this reason, some Web developers have instead recommended either avoiding specifying both width and padding for the same element or using
==Support for Internet Explorer's box model==
Line 84 ⟶ 108:
The W3C has included a "box-sizing" property in CSS3. When <code>box-sizing: border-box;</code> is specified for an element, any padding or border of the element is drawn ''inside'' the specified width and height, "as commonly implemented by legacy HTML user agents".<ref>{{Cite web| url=http://www.w3.org/TR/css3-ui/#box-sizing | title=CSS3 Basic User Interface Module | publisher=[[World Wide Web Consortium]]}}</ref> [[Internet Explorer 8]], [[WebKit]] browsers such as [[Safari (web browser)|Apple Safari]] 5.1+ and [[Google Chrome]], [[Gecko (layout engine)|Gecko-based]] browsers such as [[Mozilla Firefox]] 29.0 and later, [[Opera (web browser)|Opera]] 7.0 and later, and [[Konqueror]] 3.3.2 and later support the CSS3 box-sizing property. Gecko browsers previous than 29.0 support the same functionality using the browser-specific <code>-moz-box-sizing</code> property.<ref>{{Cite web|url=https://developer.mozilla.org/en/CSS/box-sizing |title=-moz-box-sizing |access-date=2009-04-11 |work=[[Mozilla Developer Center]] |publisher=[[Mozilla]]|date=11 April 2009 |quote=It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification. }}</ref> <code>border-box</code> is the default box model used in [[Bootstrap (front-end framework)|Bootstrap framework]].
==See also==
* [[Layout (computing)]]
==References==
Line 90 ⟶ 117:
==External links==
* [http://www.w3.org/TR/CSS21/box.html The world wide web consortium (W3C) specification of the box model]
* [https://www.w3schools.com/css/css_boxmodel.asp A tutorial on the CSS box model]
* [http://tantek.com/CSS/Examples/boxmodelhack.html Tantek Çelik's description of the "box model hack"]
* [https://web.archive.org/web/20061209090244/http://webdesign.about.com/od/css/a/aaboxmodelhack.htm Getting Internet Explorer to Play Well with CSS]
* [http://msdn2.microsoft.com/en-us/library/Bb250496 Cascading Style Sheet Compatibility in Internet Explorer 7]
* [https://web.archive.org/web/20100103111556/http://renownedmedia.com/blog/css-box-model-differences-in-firefox-and-internet-explorer/ CSS Box Model differences in Firefox and Internet Explorer]
{{W3C Standards}}
[[Category:Web development]]
| |||