Home >Web Front-end >HTML Tutorial >CSS Specification > 8 Box Model Box Model_html/css_WEB-ITnose
CSS Specification > 8 Box Model Box Model_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:38:451023browse
8 Box Model Box Model
URL: http://www.w3.org/TR/CSS2/box.html
Translator: HaoyCn
Date: 15th of Aug, 2015
Translator's Note: This translation only translates the essential parts of the specification, mainly describing the box model structure, and focusing on analyzing margin folding. Personal level is limited, corrections are welcome!
The CSS box model describes a rectangular box generated from elements within the document tree, laid out according to the visual formatting model.
8.1 Box Dimensions
Each box has a content area Content (such as text, pictures, etc.) and optional surrounding padding, borders and margins Regions; the size of each region is specified by properties described later in this article. The diagram below shows how these areas are related and the terminology used to describe the various parts of margins, borders, and padding.
Margins, borders and padding can be broken down into top, right, bottom and left parts (for example, in the above figure, LM means left margin and RP means right Padding, TB means top border, etc.).
The boundaries of the four areas (content, padding, border, margin) are called an "Edge", so each box has four edges:
Content Edge Content Edge or Inner Edge
The content edge surrounds a rectangle specified by the width and height of the box, which is usually determined by the rendered content of the element. The four content edges define the content box of the box.
Padding edge
Padding edge surrounds the padding of the box. If the padding width is 0, the padding edge is the content edge. The four padding edges specify the padding box of the box Padding Box .
Border edge
Border edge surrounds the border of the box. If the border width is 0, the border edge is the padding edge. The four border edges define the border box of the box.
The margin edge or outside edge
The margin edge surrounds the margins of the box. If the margin width is 0, the margin edge is the border edge. The four margin edges define the box's margin box.
Each edge can be decomposed into upper, right, lower, and left edges.
The size of the box content area?? That is, the content width Content Width and content height Content Width?? are determined by these factors: whether the element that generates the box has the width and height attributes set; whether the box contains text or other box; whether the box is a table; etc. Box width and height are discussed in the chapter Detailing the Visual Formatting Model.
The content, padding, and background style of the border area of the box are specified by the background attribute of the element that generates the box. The background of the margins is always transparent.
8.2 Examples of margins, padding and borders
The following example shows how margins, padding and borders interact. HTML document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head><title>Examples of margins, padding, and borders<title><style type="text/css"> ul { background: yellow; margin: 12px 12px 12px 12px; padding: 3px 3px 3px 3px; /* 未设置边框 */ } li { color: white;/* 文本颜色为白色 */ background: blue;/* 内容和内边距背景为蓝色 */ margin: 12px 12px 12px 12px; padding: 12px 0px 12px 12px; /* 注意右内边距为0 */ list-style: none/* 列表前没有符号 */ /* 未设置边框 */ } li.withborder { border-style: dashed; border-width: medium;/* 各边均设置边框 */ border-color: lime; }</style></head><body> <ul> <li>First element of list</li> <li class="withborder">Second element of list is a bit longer to illustrate wrapping.</li> </ul></body></html> The document results in a ul element and its two li child elements in the document tree (other relationships omitted).
The first image below shows the results of the example. The second image shows the relationship between the margins, padding, and borders of the ul element and its li child elements. (The picture is not proportional)
Note:
The content width of each li box is calculated from top to bottom; the content width of all li boxes is calculated from top to bottom; Containing blocks are created from ul elements.
The margin box height of each li box is determined by its content height plus top and bottom padding, borders, and margins. It should be noted that the vertical margins between li boxes are collapsed.
The right padding width of the li box is set to zero (padding attribute). The effect is shown in the second picture.
The outer margin of the li box is transparent??The outer margin is always transparent??So the inner margin of ul and the background color (yellow) of the content area are displayed through the outer margin come out.
The second li element specifies a dashed border (border-style attribute).
8.3 Margin attributes
The margin attributes specify the width of the box's margin area. margin sets the margins in all four directions, while the other margin properties only set the width in each direction. These properties apply to all elements, but vertical margins have no effect on non-replaced inline elements.
Translator's Note: The introduction of each attribute here and below is omitted, please check the CSS manual
8.3.1 Margin collapse
in In CSS, adjacent margins of two or more (not necessarily siblings) boxes may be merged into a single margin. Margins merged in this way are called Collapse , and the merged margins are called Collapsed Margin .
Adjacent vertical margins collapse, except:
The margins of the root element's box do not collapse
if An element with a gap whose top and bottom margins are adjacent will collapse with the adjacent margins of its following sibling, but not with the bottom margin of its parent block.
Horizontal margins do not overlap.
Two margins are adjacent if and only if:
is a block-level box in the document flow that belongs to the same block formatting context
No line boxes, gaps, padding, or borders separate them (note that some zero-height line boxes are ignored for this reason (see Chapter 9.4.2))
Box edges are vertically adjacent, that is, one of the following forms is met:
The top margin of the box and the top margin of its subbox within the first document flow
The bottom margin of the box and the top margin of the sibling box in the next document flow
If the calculated height of the parent box is auto , the bottom margin of the child box and the bottom margin of the parent box in the last document flow
If a box does not establish a new block formatting context, the min-height calculated value is zero , height calculated value is zero or auto, there is no subbox within the document flow, its top and bottom margins
If a collapsed margin is adjacent to any side of another margin, The two are considered adjacent.
Note: Elements that are not siblings or ancestors can also generate adjacent margins.
Note: The above rules state that:
The margins of a floating box are not collapsed like any other box (not even floats and their children within the document flow)
Elements that create a new block formatting context (such as floats, overflow elements that are not visible) have different margins than the margins of their child elements within the document flow
The outer margins of an absolutely positioned box are not folded like any other box (not even child elements within its document flow)
The outer margins of an inline block box
The bottom margin of a block-level element within the document flow is always the same as that of the block in the next document flow The top margin of level siblings collapses unless there is a gap between the pair of siblings.
If the block element in the document flow does not have a top border and top padding, its first block-level child element in the document flow will have no gap, and the top margins of the two will be collapsed.
For a block box with height of auto, min-height of zero, and no bottom padding and bottom border in the document flow, if the bottom of its last block-level subbox in the document flow The margins do not have the same upper margin with a gap that is folded, but the lower margin of both is folded.
If the min-height attribute of a box is zero, there are no top and bottom borders and top and bottom padding, its height is 0 or auto, it does not contain line boxes, and all its document flow sub- If the element's margins, if any, are collapsed, then its margins are collapsed.
When two or more margins are collapsed, the combined width of the margins is the maximum width of the collapsed margins. If there are negative numbers in the margins where the collapse occurs, it is the absolute value of the largest positive adjacent margin minus the smallest negative adjacent margin. If no positive margins exist, zero minus the absolute value of the smallest negative adjacent margin.
If the top and bottom margins of a box are adjacent, the margins may collapse through the box and Collapse Through It . In this case, the element's positioning depends on its relationship to other elements with collapsed margins.
If the element's margins collapse with the top margin of its parent element, the top border edge of the box is the same as the top border edge of its parent element box.
Otherwise, either the margins of the element's parent element are not collapsed, or only the bottom margin of the parent element is collapsed. If the element's bottom border is non-zero, the position of the top border edge remains unchanged.
It should be noted that the positioning of the element that is folded through has no effect on the positioning of other elements with folded margins; the positioning of its upper border edge is only used to layout its descendant elements .
8.6 Box model for inline elements in Bidirectional Context
For each line box, the user agent must render the generated inline boxes in visual order (not logical order) Margins, borders, and padding.
When the element direction attribute value is ltr, the leftmost generated box of the first line box rendered by the element has left outer margin, left border and left inner margin, while the last line box rendered by the element has the leftmost generated box. The right generated box has right padding, right border, and right margin.
When the element direction attribute value is rtl, the rightmost generated box of the first line box rendered by the element has right outer margin, right border and right inner margin, and the last line box rendered by the element has the rightmost generated box. The left generated box has left padding, left border, and left margin.
Translator’s ThoughtsThe translator finished reading this article, carefully pondered it, and summarized his experience and questions as follows:
One and two box models
This chapter describes W3C The standard box model, and there is also another box model in IE6's weird mode Quicks Mode. The difference between the two is briefly described here as follows??
Under W3C standard: total box width/height = width/height padding border margin
In weird mode: total box width/height = width /height margin = content width/height padding border margin
In CSS3, box-sizing defaults to content-box, which uses the W3C standard box model. If the value is border-box, the weird mode box model is used.
2. Opaque margins
CSS specification:
The content, padding, and background style of the border area of the box are determined by the elements that generate the box. Specified by the background attribute. The background of the margins is always transparent.
但在根元素 html 上设置了外边距，并规定了背景，该背景仍铺满全屏。
如下CSS：
html {margin: 50px;background: #000;} body 同此理。译者暂不知其因。欢迎读者指教。
三、有空隙的元素
外边距折叠中，很多地方叙述了“有空隙的元素”，这是什么意思呢？其意义即是说，该元素清除了浮动。
在翻译视觉格式化模型一章中，W3C给出了清除浮动以及计算空隙宽度的的案例，译者建议读者认真阅读该部分，尤其关注：当空隙为负值时取消外边距折叠的情形。
点此阅读：http://segmentfault.com/a/1190000003096320。
如果读者已经掌握清除浮动和空隙的知识，那就让我们来看一个有空隙的情景。
> 如果一个有空隙的元素的上下外边距相邻，其外边距将同其后同胞的相邻外边距折叠，但不同父块的下外边距折叠。
以下代码中， B 是浮动块，为清除其浮动， C 引入了空隙。
共同CSS：
html,body{padding:0;margin:0;}/*横线，直观对比折叠情况*/.line{height:50px;background:red;} .mt{margin-top:50px;}.mb{margin-bottom:50px;}#B{float:left;width:1px;height:1px;}#C{clear:both;} 其外边距将同其后同胞的相邻外边距折叠：
HTML：
<body> <div id="A"> <div id="B"></div> <div id="C" class="mb"></div> <div id="D" class="mb"></div> <div class="line"></div> </div> </body>
渲染结果是， C 和 D 的外边距折叠。
不同父块的下外边距折叠
HTML：
<body> <div id="A" class="mb"> <div id="B"></div> <div id="C" class="mb"></div> </div> <div class="line"></div> </body>
渲染结果是， C 的外边距不同其父元素 A 的外边距折叠。
四、避免盒自身垂直外边距折叠
如果一个盒不建立新的块格式化上下文、 min-height 计算值为零、 height 计算值为零或 auto 、没有在文档流内的子盒，其上下外边距
由此可以得出几种避免盒自身上下外边距折叠的办法，简单列举如下：
建立新块格式化上下文，如 overflow: hidden
设置 min-height
设置固定高 height
添加文档流内（即非浮动、非绝对定位）子盒
需要注意最后一种办法，子盒要么有边框或内边距，要么有内容，否则父盒的自身垂直外边距同样会折叠。而如果子盒只有垂直外边距，该垂直外边距将同父盒的垂直外边距折叠，而不会阻止父盒自身垂直边距折叠。