使用chrome development tool观察box 模型
測試代碼如下：
<html> <style> #parent{width:400px;height:400px;margin:20px;padding:19px;border:18px solid;border-color: yellow;background-color:green;/*overflow:hidden;*/}#child{width:200px;height:200px;margin:17px;padding:16px;border:15px solid white;background-color:blue;} </style> <body><div id="parent">parent<div id="child">child </div></div> </body> </html>將光標(biāo)置于parent div node，在右邊的Computed tab里即可觀測box model的各項attribute:
整個window在Computed view里顯示為如下圖右下角顏色:
content edge or inner edge
The content edge surrounds the rectangle given by the width and height of the box, which often depend on the element’s rendered content. The four content edges define the box’s content box.
padding edge
The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is the same as the content edge. The four padding edges define the box’s padding box.
border edge
The border edge surrounds the box’s border. If the border has 0 width, the border edge is the same as the padding edge. The four border edges define the box’s border box.
margin edge or outer edge
The margin edge surrounds the box margin. If the margin has 0 width, the margin edge is the same as the border edge. The four margin edges define the box’s margin box.
Collapsing margins
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
Horizontal margins never collapse.
view port
User agents for continuous media generally offer users a viewport (a window or other viewing area on the screen) through which users consult a document. User agents may change the document’s layout when the viewport is resized (see the initial containing block).
Continuous media 的user agent通常給用戶提供了一個view port，即一個窗口或屏幕上其他viewing area，通過view port用戶可以同document交互。
當(dāng)viewport 尺寸發(fā)生變化時，User agent會將document重新布局。
containing block
In CSS 2.1, many box positions and sizes are calculated with respect to the edges of a rectangular box called a containing block.
盒模型的位置和尺寸計算都基于一個稱之為containing block的矩形框的邊界。
In general, generated boxes act as containing blocks for descendant boxes; we say that a box “establishes” the containing block for its descendants.
生成的box扮演后代盒子的containing block, 我們稱這個過程為"establish".
The phrase “a box’s containing block” means “the containing block in which the box lives,” not the one it generates.
“a box’s containing block” 意思是box位于的containing block，而不是該box生成的containing block.
block-level elements
Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs).
以塊的方式顯示的元素。
The following values of the ‘display’ property make an element block-level: ‘block’, ‘list-item’, and ‘table’.
下列display屬性的值，讓element以塊的方式顯示元素：
- block
- list-item
- table
Each block-level element generates a principal block-level box that contains descendant boxes and generated content and is also the box involved in any positioning scheme.
每個block level的元素，都會生成一個principal block-level的盒模型，包含descendant盒模型，以及生成的content. 該principal block-level box也會參與到positioning scheme中。
Some block-level elements may generate additional boxes in addition to the principal box: ‘list-item’ elements. These additional boxes are placed with respect to the principal box.
Anonymous block boxes
看這段代碼：
<DIV>Some text<P>More text </DIV>(and assuming the DIV and the P both have ‘display: block’), the DIV appears to have both inline content and block content. To make it easier to define the formatting, we assume that there is an anonymous block box around “Some text”.
Inline level element
Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.).
The following values of the ‘display’ property make an element inline-level: ‘inline’, ‘inline-table’, and ‘inline-block’.
下列屬性讓element具有inline-level：
- inline
- inline-table
- inline-block
Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.
看個例子：
<p>Some <em>emphasized</em> text</p>更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:
總結(jié)
以上是生活随笔為你收集整理的使用chrome development tool观察box 模型的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 五一假期返程火车票今日开抢：千万别忘记
- 下一篇： 如何debug web worker