w3c標準 - Css - （3）盒模型與線模型
1. 視覺格式化模型visual formatting model
(1) 用來處理文檔並將文檔顯示在視覺媒體上的機制，是一套既定的規則，規定了瀏覽器怎麼處理每一個盒子。
(2) 控制布局的因素
a. 盒子的尺寸和類型
b. 定位體系 Positioning Scheme （常規流，浮動和絕對位置）
c. 文檔書中元素之間的關係
d. 外部資訊（視口大小，圖片的固有尺寸等）
(3) 名詞解釋
a. 元素塊 css假設每個元素都會產生Box，成為元素框，其中包含margin，border，padding, margin,請看下面的盒模型
b. 包含塊 每個元素都有包含塊，包含塊的含義就是元素的布局上下文。就像上圖中的div的包含塊就是body（html元素在文檔流中沒有包含塊，如果有的話，應該是瀏覽器吧）
c. 替換/非替換元素 替換元素就是瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。通過 CSS content 屬性來插入的對象 被稱作 匿名可替換元素如果元素的內容包含在文檔之中，則為非替換元素非替換元素的所有規則同樣適用於替換元素，只有一個例外，width如果是auto,元素的高寬就是內容的固有高寬，比如img就是圖片的原始大.
(4) 區塊層級元素（block-level elements）和塊盒 （block boxes）
區塊層級元素在來源文件中格式化為可見的塊。display的屬性值為block，list-item, table的元素是區塊層級元素。如下圖所示。
一般情況下一個區塊層級元素產生一個塊級盒（block-level box），稱為主塊級盒（principal block-level box），主塊級盒用來包含後代盒（descendant boxes）以及後代盒中的內容。主塊級盒可以參與任何定位方案（positioning scheme）。
Note: 有些區塊層級元素除了產生主塊級盒，也可能產生額外的盒（additional boxes），比如display屬性值為“list-item”的元素。產生的額外的盒用來包含項目符號（可以用list-style-position屬性設定額外的盒是放在主塊級盒內還是外）。請看如下樣本
<ul list-style-position="inside"><li>rod</li><li>augmentum</li></ul><ul list-style-position="outside"><li>rod</li><li>augmentum</li></ul>
ul[list-style-position="inside"] {background: yellow;list-style-position: inside;}ul[list-style-position="outside"] {background: yellow;list-style-position: outside;}
相信大家已經看到上面兩個ul的不同，對於項目符號而言，如果設定的list-style-position: outsidede的話，則項目符號所佔用的盒子是河外的盒子，而不是ul的盒子。
(5) 塊容器盒
除了表格盒和可替換元素盒外，一個塊級盒也可以是一個塊容器盒，塊容器盒有兩個功能（只能同時具備一種功能）
a. 只用來包含其他塊級盒
b. 建立一個行內格式化上下文（inline formating context）,行內格式化上下文只用來包含行內集盒。
不是所有的塊容器盒都是塊級盒。不可替換行內塊（non-replaced inline blocks）和不可替換表儲存格（non-replaced table cells）是塊容器盒，但不是塊級盒。如果一個塊級盒同時又是一個塊容器盒，那麼我們可以叫這個塊級盒為塊盒（block boxes）。
塊級盒和塊容器盒是兩個並列的概念，他們的關係如下圖：
6)匿名塊盒
如果一個塊容器盒（例如上例中<div>元素產生的塊級盒）包含一個塊級盒（例如上例中的<p>元素產生的塊級盒），那麼強制讓這個塊容器盒只包含塊級盒。下面紅色標註的地方存在匿名和盒子的。
note: 當一個行內盒（inline box）包含一個處在文檔流中的塊級盒時，這個行內盒（和他的在同一個行盒[line box]內的祖先）會被這個塊級盒（當然還有緊跟這個塊級盒，或者被可摺疊的空白隔開的，或者是脫離文檔流的同胞區塊層級元素[盒]）打斷拆分成兩個盒（即使拆分成的兩個盒中有一個為空白），這兩個盒會分布在這個塊級盒的兩邊。
（7）行內級元素和行內盒（Inline-level elements and inline boxes）
行內級元素是那些在來源文件中不形成新的內容塊，而分布在行中的元素（例如段落裡的強調文本，行內圖片等）。display屬性的值為“inline”、“inline-table”、“inline-block”的元素是行內級元素。
行內級元素產生行內級盒（inline-level boxes），行內級盒參與行內格式化上下文（inline formatting context）的布局。
行內盒（inline box）是一種行內級盒，他的內容參與他包含的行內格化式內容相關的布局。display值為“inline”的不可替換元素產生行內盒。不是行內盒的行內級盒叫做原子行內（級）盒（atomic inline-level boxes）。原子行內盒作為一個不可拆分的整體參與行內格式內容相關的布局（不能拆分為多個盒跨行顯示）。
2. Formatting context
每個元素，或者說每個Box會根據設定的display值，去選擇渲染它的方式，不同的display有不同層級：block-level box（塊級）inline-level box(行級)，run-in box(插入型框 css3)，不同的層級會參與不同的環境（formatting context）去渲染
(1) BFC塊級格式化上下文（block formatting context）規定了塊級盒子的渲染布局方式
(2) BFC有什麼特點：
a. 內部盒子會在垂直方向排列 b. 同一個BFC上的元素可能發生margin collapse c. BFC就是頁面上的一個隔離的獨立容器，例外互相不受影響 d. 計算BFC的高度時，考慮BFC所包含的所有子項目，連浮動元素也要參與計算。 e. 當元素不是BFC的子項目時，浮動元素高度不參與BFC計算（常見的盒子塌陷問題）
(3) 什麼元素會產生新的BFC
a. 根項目html b. float元素不為none c. position為absolute或fixed d. display為inline-block, table-cell, table-caption, flex, inline-flex e. overflow不為visible
(4) 我可以用BFC做哪些處理
a. 清除浮動 b. 阻止邊距摺疊 c. 用於布局
（5）BFC相容性
IE6-7不支援BFC，而是使用私人屬性hasLayout。表現上來看hasLayout和BFC相似，觸發hasLayout條件與BFC相似，另外需要為元素設定IE特有的CSS屬性zoom:1; zoom用於設定或檢索元素的縮放比例，值為1即使用元素實際尺寸，使用zoom既可以觸發hasLayout又不會對元素產生其他影響，相對來說更加方便
3. Block box
在block box，會被水平格式化，垂直格式化
（1）水平格式化
區塊層級元素框的水平部分 = 其父元素的width = margin-left+margin-right + padding-left+padding-right+ border-left+border-right+自身width
note:
a. 設定padding為auto，均invalid。 在padding-left/right,margin-left/right,border-left/right,width（我們簡稱下水平7大屬性）中只有margin和width的值可能為auto
b. 為什麼margin-right是剩餘的所有寬度?因為當margin-left/right，width三個值均設定有固定寬度的時候，margin-right會根據包含塊的width自動補齊
c. 利用margin：0 auto 置中，利用這種方式置中的時候，必須是要設定置中元素的寬度，這樣左右margin的值便會相等，從而引起的置中，這個和text-align：center只能區塊層級元素的內聯內容設定置中是不一樣的。
（2） 垂直格式化
只有三個屬性可以設定auto，height，和margin-top/bottom。注意。這裡如果margin-top和margin-bottom同時設定為auto，也不會垂直置中，而是預設為零。垂直格式化，有一個很重要的方面是會造成垂直相鄰外邊距合并
（3）負margin
a. 水平方向，先看一下下圖中的頁面show
第二個div是margin-left: 20px, 因為沒有定框（width值），當margin-left為正值時，width實際上減少的，反向同樣當width-left為負值時，div發生位移，width增大。 第三個div因為有定框，所以只會發生位移，width不會發生變化，因為父元素的寬度不會發生變化。
b. 垂直方向：向反方向移動
c. 與float的聯用
float的情況下，margin-left: -100%, 會將元素提到第一排來。這裡的原因，我猜測是浮動的情況下，在第二排的元素margin-left為負值的情況下並且位移量已經超過自身的寬度，在第二排已經超出了float的範圍，然後提到了第一排的內容上，並且覆蓋了第一排的內容，因為瀏覽器自上而下渲染，肯定是將後面的內容覆蓋前面的內容。對於這種情況只能向前提一排，我試過可不可以提兩排的情況，答案是不能。至於原因，還不太瞭解。
4. line box
每一行稱為一條Line Box，它又是由這一行的許多inline-box組成，它的高度可以直接由line-height決定，line boxes的高度垂直堆疊形成了containing box的高度，就是我們見到的div或是p標籤之類的高度了。
（1） 內容區： css假設每個元素都會產生一個或者多個Box，稱為元素框，元素框中心有內容區，內容區外周圍包括了padding，border，margin。
（2）行間距
行間距是font-size與line-height的差值，被分成兩半在內容區的上下。
（3）行內框
非替換元素，行內框高度=line-height。
替換元素，行內框高度=內容區寬度（行間距不應用到替換元素）。
（4）行高
兩行文字基準的距離。
（5）行框
一行有很多行內框，行框是包含這一行行內框最高點和最低點的。
（6）基準
不同元素的基準位置不同，整個行框會有一個基準，行內元素的位置是基於兩者基準對齊。
參考： 想要清晰的明白（一）： CSS視覺格式化模型|盒模型|定位方案|BFC
