摘要：元素不在文檔流中結論如文章一中的結論一樣元素寬度等于其內容所占空間同樣的在文章一中也得出了元素不設高度元素的高度為其內容所占據空間若沒有內容則高度為。

在CSS:關于元素高度與寬度的討論 系列文章（一）中討論了display為display：block的置換元素的寬度與高度在不同情況下的表現,但是有些地方并不嚴謹,因此在這里做一個補充，在補充前先簡單介紹一下css盒模型以及其在可視化格式模型布局中盒子被管理的幾個要點。在CSS:關于元素高度與寬度的討論 系列文章（二）中介紹了塊級元素、塊元素、行內級元素、行內元素、置換元素、非置換元素,同樣的在這篇文章中將介紹兩種盒概念,containing box(包含塊)以及block container box(塊容器盒)

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.
css盒模型描述了在文檔樹里生成并且根據可視化格式模型進行渲染布局的矩形框們。
In the visual formatting model, each element in the document tree generates zero or more      
boxes according to the box model. The layout of these boxes is governed by:

box dimensions and type.

positioning scheme (normal flow, float, and absolute positioning).

relationships between elements in the document tree.

external information (e.g., viewport size, intrinsic dimensions of images, etc.).

在可視化格式模型中,每個元素在文檔樹里根據盒模型生成0或多個盒子。這些盒的布局被以下要素所管理

盒子的尺寸和類型

定位方案(普通流,浮動,絕對定位)

文檔樹中元素之間的關系

外部信息(例如，視口大小，圖像的內在尺寸等)
視口(viewport):視口，即可視窗口。當可視窗口的尺寸大小改變時，瀏覽器應該改變文檔的布局。 比如，有些值依賴于可視窗口的大小，DIV "width" 的 "auto" 值，等等。當可視窗口的尺寸小于文檔渲染的畫布（也就是頁面）的大小時，瀏覽器應該提供滾動機制。 每個畫布最多有一個可視窗口。但是，瀏覽器可以同時渲染多個畫布。

因此下面我們要談的便是關于盒子的尺寸問題。

In CSS 2.1, many box positions and sizes are calculated with respect to the edges of >a rectangular box called a 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. The phrase "a box"s containing block" means >"the containing >block in which the box lives," not the one it generates.
Each box is given a position with respect to its containing block, but it is not >confined by this containing block; it may overflow.

在CSS2.1中,一個包含塊的位置和尺寸相對于矩形框的邊緣記進行計算。通常,生成的框為它的后代盒子充當包含塊;我們認為,一個盒子(框)為他的后代建立了包含塊。當我們在說“一個框(盒)的包含塊”的意思是“該框所處的包含塊”，而不是說它自身產生的包含塊。

每個盒子相對于它的包含塊進行定位,但并不限于它的包含塊內;它有可能會溢出。

元素的包含塊定義如下

The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media. The "direction" property of the initial containing block is the same as for the root element.

根元素所在的包含塊為一個稱為初始包含塊的矩形框(根元素存在于initial containing block內),在我們常用的瀏覽器環境下，指的是原點與 canvas 重合，大小和 viewport 相同的矩形。
注意理解:initial containing block與根元素不是一回事。具體看例子

理解根元素與initial containing block不是一回事的例子

For other elements, if the element"s position is "relative" or "static", the containing block is formed by the content edge of the nearest block container ancestor box.

對于其他元素,如果元素的position屬性值為relative或者static(元素在文檔流中),其包含塊為祖先元素中最近的 block container box(塊容器盒) 的 content box (除 margin, border, padding 外的區域)；

If the element has "position: fixed", the containing block is established by the viewport in the case of continuous media or the page area in the case of paged media.

如果元素的position值為fixed,包含塊由視口viewport建立

If the element has "position: absolute", the containing block is established by the nearest ancestor with a "position" of "absolute", "relative" or "fixed", in the following way:
1.In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined.
2.Otherwise, the containing block is formed by the padding edge of the ancestor
If there is no such ancestor, the containing block is the initial containing block.

如果元素的position值為absolute,則它的包含塊由最近的position的值為
absolute,relative,fixed的祖先元素(offset parent)所建立,如下列方式

1.如果祖先是行內元素,則containing block為能夠包含祖先元素生成的第一個和最后一個 inline boxs 的 padding boxs (除 margin, border 外的區域) 的最小矩形；
2.否則,則由這個祖先元素的padding boxs形成

如果沒有這樣的祖先元素,則包含塊為初始包含塊

Except for table boxes, which are described in a later chapter, and replaced elements, a block-level box is also a block container box. A block container box either contains only block-level boxes or establishes an inline formatting context and thus contains only inline-level boxes. Not all block container boxes are block-level boxes: non-replaced inline blocks and non-replaced table cells are block containers but not block-level boxes. Block-level boxes that are also block containers are called block boxes.

除了table boxs以及置換元素,一個塊級盒子也是一個塊容器盒(block container box)。一個塊容器盒要么只包含塊級盒子,要么在盒內建立IFC只包含行內級盒子。也并不是所有的塊容器盒都是塊級盒子：非置換行內塊(inline-block)和非置換單元格(table-cell)同樣也是塊容器盒(block container box),但它們并不是塊級盒子。塊級盒子是被叫做塊盒的塊容器盒(block container box)

根據上面對containing box的介紹,我們可以把包含塊當成一個大箱子,箱子里要擺很多小盒子，小盒子怎么擺取決于大箱子。不同的小盒子在它的大箱子里的初始位置是不一樣的,下面舉個簡單的栗子來說明一下

CSS

 
 #wrap {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 2px dashed #333;
    background: orange;
}
#inner {
    width: 30px;
    height: 30px;
    background: #ccc;

原圖

理解一：通過此圖可以知道inner盒子在position為默認的是static時,它的包含塊為最近的祖先元素的content-box,所以他的起始位置位于從wrap的content-box的左上角

理解二：當把inner的position值設為absolute,并設top:0,left:0時,同時把wrap的值設為relative時,inner的包含塊為他的off-set parent的padding-box,因此inner定位的原點為wrap的padding-box的左上角。

思考:通過上述例子我們可以更直觀的感受到,對于不同的元素它的containing-box是不一樣的,同樣的對于高度與寬度的繼承時的計算,因為containing-box的不一樣,計算時也會出現差異的,在我的上兩篇文章中,都籠統的說成是xxx的寬或高度等于xxx的父或子的內容的寬度,因此這樣的說法是不嚴謹的,有兩點1.因為舉得例子中的祖先元素只包含content-box,而不一樣的元素的containing-box是不一樣的,有的是其某祖先元素的padding-box有的是其祖先元素的content-box因此2.且我認為對于一個元素高度與寬度的繼承應該是說繼承這個元素所處的containing-box的值的一些計算,而不是單純的認為是其父元素,因為它的父元素的有可能并不是它的包含塊或者說它所處的包含塊只是他父元素的一部分，所以下面將對于之前寫的文章作出一些補充。
注：第一篇文章的內容大體來說是正確的,因此可以先理解完第一篇文章,再來看這篇文章會更好,這邊文章的目的也算是對于前兩章不足的內容的補充,如有錯誤,歡迎指正,(^__^) 。

下面所舉得例子,html的結構就如上例子,下面就不寫出html結構了。
元素在文檔流中指的就是position的值為static或者relative

 #wrap {
    width: 100px;
    height: 40px;
    padding: 10px;
    border: 2px dashed #333;
    margin: 10px;
    background: orange;
}
#inner {
    width: 100%;
    height: 100%;
    background: #ccc;
}

加上float等于left或者right時，效果與上圖相同

結論1：當元素在文檔流中或者為浮動元素時,元素的寬高度為其祖先元素中最近的 block container box(塊容器盒)的content box,也就是繼承它的包含塊的寬高度。例子如下
html

css

body {
    margin: 0;
}
.wrap {
    width: 800px;
    padding: 10px;
    border: 5px solid #fdf;
    background: #1de;
}
.wrap-inner {
    height: 100px;
    width: 100%;
    background: #ead;
    margin: 0 210px;
}

效果如下

wrap-inner的width=800*100%=800。

在上述css中的inner上加上position:absolute,在wrap上加上position:relative,效果如下

因為inner并未設置它的定位值,故其位置顯示如圖,若設定位值也是相對于offset parent的padding-box進行定位,可看上面的理解一二。

結論2:當元素的position的值為absolute時,元素的寬高度為其其祖先元素中最近的offset parent的padding box,也就是繼承它的包含塊的寬高度 。

在上述css中的inner上加上position:fixed;

因為inner并未設置它的定位值,故其位置顯示如圖。

結論3:當元素的position的值為fixed時,元素的寬高度為其包含塊viewport的寬高度。

#wrap {
    width: 100px;
    height: 40px;
    padding: 10px;
    border: 2px dashed #333;
    margin: 10px;
    background: orange;
}
#inner {
    height: 10px;
    background: #ccc;
}

結論1：當元素在文檔流時,元素的border-box寬度加上其margin-left和margin-right的值為其祖先元素中最近的 block container box(塊容器盒)的content box的寬度,也就是繼承它的包含塊的寬度。公式為"margin-left" + "border-left-width" + "padding-left" + "width" + "padding-right" + "border-right-width" + "margin-right" = width of containing block。看下例。

html

css

body {
    margin: 0;
}
.wrap {
    width: 800px;
    padding: 10px;
    border: 5px solid #fdf;
    background: #1de;
}
.wrap-inner {
    height: 100px;
    background: #ead;
    margin: 0 210px;
}

效果如下

380+210*2=800，同上公式。注意對比與上面width=100%例子的區別。

結論2：如文章一中的結論一樣,元素寬度等于其內容所占空間,同樣的在文章一中,也得出了元素不設高度,元素的高度為其內容所占據空間,若沒有內容,則高度為0。

思考:那么由此我們可以引發我們的又一思考,在高度或者寬度由內容決定的情況下,當元素的子代的position scheme不同的情況下,元素的寬高度又是如何變化的？
元素寬度或高度由內容決定

接下來我就不舉栗子了,直接給出結論

元素不設寬度且元素不在文檔流中，元素寬度為內容寬度
元素不設高度，元素高度等于內容高度

元素不在文檔流中

當子元素都為普通流中元素時,元素寬度為子元素中寬度最大的元素，高度為子元素高度之和（子元素單個計算：子元素高度 +　子元素padding + 子元素border + 子元素margin）

當子元素都為浮動元素時,元素寬度為子元素寬度之和，高度為子元素中高度最大的元素

當子元素都為絕對定位或者固定定位元素時，元素寬度和高度都為0

元素不設寬度且元素在文檔流中，元素寬度為其祖先元素中最近的 block container box(塊容器盒) 的 content box
元素不設高度，元素高度等于內容高度

元素在文檔流中

當子元素都為普通流中元素，高度為子元素高度之和(子元素單個計算：子元素高度＋子元素padding+子元素border)(邊距折疊)

當子元素不在文檔流中，元素高度為0

1.當元素繼承其祖先元素的寬高度時,元素的寬高度等于containing-box的高寬度
2.當元素的寬度或者高度等于其內容的寬度或者高度時,如上得出的結論