摘要：元素不在文檔流中結(jié)論如文章一中的結(jié)論一樣元素寬度等于其內(nèi)容所占空間同樣的在文章一中也得出了元素不設(shè)高度元素的高度為其內(nèi)容所占據(jù)空間若沒(méi)有內(nèi)容則高度為。

在CSS:關(guān)于元素高度與寬度的討論 系列文章（一）中討論了display為display：block的置換元素的寬度與高度在不同情況下的表現(xiàn),但是有些地方并不嚴(yán)謹(jǐn),因此在這里做一個(gè)補(bǔ)充，在補(bǔ)充前先簡(jiǎn)單介紹一下css盒模型以及其在可視化格式模型布局中盒子被管理的幾個(gè)要點(diǎn)。在CSS:關(guān)于元素高度與寬度的討論 系列文章（二）中介紹了塊級(jí)元素、塊元素、行內(nèi)級(jí)元素、行內(nèi)元素、置換元素、非置換元素,同樣的在這篇文章中將介紹兩種盒概念,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盒模型描述了在文檔樹(shù)里生成并且根據(jù)可視化格式模型進(jìn)行渲染布局的矩形框們。
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.).

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

盒子的尺寸和類(lèi)型

定位方案(普通流,浮動(dòng),絕對(duì)定位)

文檔樹(shù)中元素之間的關(guān)系

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

因此下面我們要談的便是關(guān)于盒子的尺寸問(wèn)題。

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中,一個(gè)包含塊的位置和尺寸相對(duì)于矩形框的邊緣記進(jìn)行計(jì)算。通常,生成的框?yàn)樗暮蟠凶映洚?dāng)包含塊;我們認(rèn)為,一個(gè)盒子(框)為他的后代建立了包含塊。當(dāng)我們?cè)谡f(shuō)“一個(gè)框(盒)的包含塊”的意思是“該框所處的包含塊”，而不是說(shuō)它自身產(chǎn)生的包含塊。

每個(gè)盒子相對(duì)于它的包含塊進(jìn)行定位,但并不限于它的包含塊內(nèi);它有可能會(huì)溢出。

元素的包含塊定義如下

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.

根元素所在的包含塊為一個(gè)稱(chēng)為初始包含塊的矩形框(根元素存在于initial containing block內(nèi)),在我們常用的瀏覽器環(huán)境下，指的是原點(diǎn)與 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.

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

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.如果祖先是行內(nèi)元素,則containing block為能夠包含祖先元素生成的第一個(gè)和最后一個(gè) inline boxs 的 padding boxs (除 margin, border 外的區(qū)域) 的最小矩形；
2.否則,則由這個(gè)祖先元素的padding boxs形成

如果沒(méi)有這樣的祖先元素,則包含塊為初始包含塊

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以及置換元素,一個(gè)塊級(jí)盒子也是一個(gè)塊容器盒(block container box)。一個(gè)塊容器盒要么只包含塊級(jí)盒子,要么在盒內(nèi)建立IFC只包含行內(nèi)級(jí)盒子。也并不是所有的塊容器盒都是塊級(jí)盒子：非置換行內(nèi)塊(inline-block)和非置換單元格(table-cell)同樣也是塊容器盒(block container box),但它們并不是塊級(jí)盒子。塊級(jí)盒子是被叫做塊盒的塊容器盒(block container box)

根據(jù)上面對(duì)containing box的介紹,我們可以把包含塊當(dāng)成一個(gè)大箱子,箱子里要擺很多小盒子，小盒子怎么擺取決于大箱子。不同的小盒子在它的大箱子里的初始位置是不一樣的,下面舉個(gè)簡(jiǎn)單的栗子來(lái)說(shuō)明一下

CSS

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

原圖

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

理解二：當(dāng)把inner的position值設(shè)為absolute,并設(shè)top:0,left:0時(shí),同時(shí)把wrap的值設(shè)為relative時(shí),inner的包含塊為他的off-set parent的padding-box,因此inner定位的原點(diǎn)為wrap的padding-box的左上角。

思考:通過(guò)上述例子我們可以更直觀(guān)的感受到,對(duì)于不同的元素它的containing-box是不一樣的,同樣的對(duì)于高度與寬度的繼承時(shí)的計(jì)算,因?yàn)閏ontaining-box的不一樣,計(jì)算時(shí)也會(huì)出現(xiàn)差異的,在我的上兩篇文章中,都籠統(tǒng)的說(shuō)成是xxx的寬或高度等于xxx的父或子的內(nèi)容的寬度,因此這樣的說(shuō)法是不嚴(yán)謹(jǐn)?shù)?有兩點(diǎn)1.因?yàn)榕e得例子中的祖先元素只包含content-box,而不一樣的元素的containing-box是不一樣的,有的是其某祖先元素的padding-box有的是其祖先元素的content-box因此2.且我認(rèn)為對(duì)于一個(gè)元素高度與寬度的繼承應(yīng)該是說(shuō)繼承這個(gè)元素所處的containing-box的值的一些計(jì)算,而不是單純的認(rèn)為是其父元素,因?yàn)樗母冈氐挠锌赡懿⒉皇撬陌瑝K或者說(shuō)它所處的包含塊只是他父元素的一部分，所以下面將對(duì)于之前寫(xiě)的文章作出一些補(bǔ)充。
注：第一篇文章的內(nèi)容大體來(lái)說(shuō)是正確的,因此可以先理解完第一篇文章,再來(lái)看這篇文章會(huì)更好,這邊文章的目的也算是對(duì)于前兩章不足的內(nèi)容的補(bǔ)充,如有錯(cuò)誤,歡迎指正,(^__^) 。

下面所舉得例子,html的結(jié)構(gòu)就如上例子,下面就不寫(xiě)出html結(jié)構(gòu)了。
元素在文檔流中指的就是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時(shí)，效果與上圖相同

結(jié)論1：當(dāng)元素在文檔流中或者為浮動(dòng)元素時(shí),元素的寬高度為其祖先元素中最近的 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,效果如下

因?yàn)閕nner并未設(shè)置它的定位值,故其位置顯示如圖,若設(shè)定位值也是相對(duì)于offset parent的padding-box進(jìn)行定位,可看上面的理解一二。

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

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

因?yàn)閕nner并未設(shè)置它的定位值,故其位置顯示如圖。

結(jié)論3:當(dāng)元素的position的值為fixed時(shí),元素的寬高度為其包含塊viewport的寬高度。

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

結(jié)論1：當(dāng)元素在文檔流時(shí),元素的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?？聪吕?/p>

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，同上公式。注意對(duì)比與上面width=100%例子的區(qū)別。

結(jié)論2：如文章一中的結(jié)論一樣,元素寬度等于其內(nèi)容所占空間,同樣的在文章一中,也得出了元素不設(shè)高度,元素的高度為其內(nèi)容所占據(jù)空間,若沒(méi)有內(nèi)容,則高度為0。

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

接下來(lái)我就不舉栗子了,直接給出結(jié)論

元素不設(shè)寬度且元素不在文檔流中，元素寬度為內(nèi)容寬度
元素不設(shè)高度，元素高度等于內(nèi)容高度

元素不在文檔流中

當(dāng)子元素都為普通流中元素時(shí),元素寬度為子元素中寬度最大的元素，高度為子元素高度之和（子元素單個(gè)計(jì)算：子元素高度 +　子元素padding + 子元素border + 子元素margin）

當(dāng)子元素都為浮動(dòng)元素時(shí),元素寬度為子元素寬度之和，高度為子元素中高度最大的元素

當(dāng)子元素都為絕對(duì)定位或者固定定位元素時(shí)，元素寬度和高度都為0

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

元素在文檔流中

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

當(dāng)子元素不在文檔流中，元素高度為0

1.當(dāng)元素繼承其祖先元素的寬高度時(shí),元素的寬高度等于containing-box的高寬度
2.當(dāng)元素的寬度或者高度等于其內(nèi)容的寬度或者高度時(shí),如上得出的結(jié)論