CSS視覺格式化這個詞可能比較陌生，但說起盒模型可能就恍然大悟了。實際上，盒模型只是CSS視覺格式化的一部分。視覺格式化分爲塊級和行內兩種處理方式。理解視覺格式化，可以確定得到的效果是應該顯示的正確效果，還是瀏覽器兼容性的bug。下面將詳細介紹CSS視覺格式化
術語解釋
瞭解CSS視覺格式化之前要先了解一些基本術語。而下面所有的術語中，最重要的就是基本框和包含塊
【基本框】
CSS假定每個元素都會生成一個或多個矩形框，這稱爲元素框。各元素框中心有一個內容區(content area)。這個內容區周圍有可選的內邊距、邊框和外邊距。之所以可選，是因爲它們的寬度可以設置爲0
可以用多種屬性設置外邊距、邊框和內邊距。內容的背景也會應用到內邊距。外邊距通常是透明的，從中可以看到父元素的背景。內邊距不能是負值，但是外邊距可以
對於不同類型的元素格式化時存在着差別。塊級元素的處理不同於行內元素，而浮動元素和定位元素也分別有着各自不同的表現
【包含塊】
每個元素都相對於其包含塊擺放，包含塊就是一個元素的佈局上下文。對於正常的文本流中的一個元素而言，包含塊由最近的塊級祖先框、表單元格或行內塊祖先框的內容邊界構成
[注意]行內元素的擺放方式並不直接依賴於包含塊
【其他術語】
1、正常流
文本從左向右、從上向下顯示，是傳統HTML文檔的文本佈局
2、非替換元素
如果元素的內容包含在文檔中，則稱之爲非替換元素
3、替換元素
指作爲其他內容佔位符的一個元素(<img>、<video>、<audio>等)。但，inline-block元素在佈局中也當作替換元素處理。所以，又包含大量的表單類元素及表格類元素
4、塊級元素
在正常流中，在其元素框之前和之後生成“換行”，且會垂直襬放的元素。通過聲明display:block可以讓元素生成塊級框
5、行內元素
在正常流中，不會在元素框之前或之後生成“行分隔符”，是塊級元素的後代。通過聲明display:inline可以讓元素生成行內框
6、根元素
位於文檔樹頂端的元素，在HTML文檔中，是元素HTML
盒模型
盒模型又叫框模型，由寬高、內邊距、邊框和外邊距組成
【四個盒子】
關於盒模型，首先要確定四個盒子的概念
1、元素框是指margin box
元素框: width/height + padding + border + margin
2、可視區域是指border box
[注意]關於可視區域，一直都有兩個爭論，一個指border box，另一個指padding box。但從字面去理解，可視區域應該就是指可以看到的區域，應該以border box爲準
可視區域：width/height + padding + border
3、客戶區(client)是指padding box
[注意]關於客戶區這種說法來源於javascript中的clientWidth和clientHeight
客戶區：width/height + padding
4、內容區是指content box(width和height組成)
內容區：width/height
對於水平和垂直佈局，有着不同的效果，下面以水平格式化和垂直格式化分別介紹
【水平格式化】
水平格式化的規則是正常流中塊級元素框的水平總和等於父元素的width
專門建立的學習Q-q-u-n ⑦③①-⑦⑦①-②①① 分享學習方法和需要注意的小細節，不停更新最新的教程和學習技巧（從零基礎開始到WEB前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）
點擊：我們的前端學習圈
水平格式化的7大屬性是margin-left、border-left、padding-left、width、padding-right、border-right、margin-right。7個屬性的值加在一起是元素包含塊的寬度，這往往是塊元素的父元素的width值(因爲塊級元素的父級元素幾乎都是塊級元素)
auto
視覺格式化中比較重要的一個概念就是auto。auto值是用來彌補實際值與所需總和的差距
在水平格式化的7個屬性中只有margin-left、width、margin-right三個屬性可以設置爲auto，其餘屬性必須設置爲特定的值，或者默認寬度爲0
1、1個auto
若只有一個值爲auto，則根據7個水平屬性的總結等於父級width的公式，計算出auto所表示的值
由於width默認值爲auto，而margin、border和padding默認值都爲0。所以，會有塊級元素默認撐滿父元素的表現
2、2個auto
若margin-left和margin-right爲auto，則元素將在父元素中居中顯示
若margin-left和width爲auto，則margin-left將被重置爲0
若margin-right和width爲auto，則margin-right將被重置爲0
3、3個auto
若三個值都爲auto，則margin-left和margin-right都被重置爲0
4、0個auto
若margin-left/width/margin-right三個屬性都設置爲非auto的某個值，這種情況叫做格式化屬性過分受限。這樣margin-right將被重置爲auto
替換元素
上面介紹的是正常文本流中非替換塊級元素的水平格式化，而替換塊級元素管理起來則更簡單一些。非替換塊元素的所有規則同樣適用於替換塊元素，只有一個例外：如果width是auto，元素的寬度則是內容的固有寬度
下面以圖片爲例子來說明塊級替換元素，但由於圖片是行內替換元素，所以需要將display設置爲block
如果一個替換元素的width不同於其固有寬度，那麼height值也會成比例變化，除非Height顯式設置一個特定值，反過來也一樣
【垂直格式化】
一個元素的默認高度由其內容決定，高度還會受內容寬度的影響，段落越窄，相應地就會越高，以便容納其中所有的內聯內容
在CSS中，可以對任何塊級元素設置顯式高度。如果指定高度大於顯示內容所需高度，多餘的高度會產生一個視覺效果，就好像有額外的內邊距一樣；如果指定高度小於顯示內容所需高度，則會向元素添加一個滾動條。如果元素內容的高度大於元素框的高度，瀏覽器的具體行爲取決於overflow屬性
與水平格式化的情況類似，垂直格式化也有7個相關屬性：margin-top/border-top/padding-top/height/padding-bottom/border-bottom/margin-bottom
垂直格式化7大屬性的和必須等於元素包含塊的height
auto
在垂直格式化的7個屬性中，只有margin-top、height、margin-bottom三個屬性可以設置爲auto
與水平格式化不同，垂直格式化的auto處理較爲簡單。如果塊級正常流元素設置爲height:auto，顯示時其高度將恰好足以包含其內聯內容的行盒；如果margin-top或margin-bottom設置爲auto，它會自動計算爲0
[注意]對於定位元素的上下外邊距的auto處理，則有所不同
行佈局
行內元素沒有塊級元素那麼簡單和直接，塊級元素只是生成框，通常不允許其他內容與這些框並存
在瞭解行內元素視覺格式化之前要先了解一些涉及到的基本術語
【術語】
1、匿名文本
匿名文本(anonymous text)是指所有未包含在行內元素中的字符串
2、em框
em框在字體中定義，也稱爲字符框(character box)。實際的字形可能比其em框更高或更矮。在CSS中，font-size的值確定了各個em框的高度
3、內容區
在非替換元素中，內容區是元素中各字符的em框串在一起構成的框；而在替換元素中，內容區就是元素的固有高度再加上可能有的外邊距、邊框或內邊距。內容區類似於一個塊級元素的內容框(content box)
4、行間距
行間距(leading)是font-size和line-height之差。這個差實際上要分爲兩半，分別應用到內容區的頂部和底部
[注意]行間距只應用於非替換元素
5、行內框
行內框通過向內容區增加行間距來描述。對於非替換元素，元素行內框的高度等於line-height的高度；對於替換元素，元素行內框的高度則恰好等於內容區的高度，因爲行間距不應用到替換元素
[注意]行內框的區域與內聯元素背景顏色所在的區域無關
6、行框
行框是包含該行中出現的行內框的最高點和最低點的最小框。換句話說，行框的上邊界要位於最高行內框的上邊界；而行框的底邊要放在最低行內框的下邊界
【構造行框】
行框構造是行佈局中非常重要的一個環節，接下來介紹行框構造的步驟
1、構造各元素的行內框
a、對於替換元素來說，得到各元素的height、margin-top、margin-bottom、padding-top、padding-bottom、border-top-width、border-bottom-width值，把它們加在一起(因爲，行間距不應用到替換元素上，所以替換元素的內容大小等於行內框大小)
b、對於非替換元素來說，得到各行內非替換元素及不屬於後代行內元素的所有文本的font-size值和line-height值，再將line-height減去font-size，得到行的行間距，這個行間距除以2，將其一半分別應用到em框的頂部和底部
2、對於各內容區，確定它在整行基線的上方和下方分別超出多少。對於非替換元素來說，確定各元素及匿名文本各部分的基線的位置，並知道該行本身基線的位置，然後將其對齊；對於替換元素來說，將其底邊放在整行的基線上
3、對於指定了vertical-align值的元素，確定其垂直偏移量。由此可知，該元素的行內框要向上或向下移動多遠，並改變元素在基線上方或下方超出的距離
4、既然已經知道了所有行內框會放在哪裏，再來計算最後的行框高度。爲此，只需將基線與最高行內頂端之間的距離加上基線與最低行內框底端之間的距離
行的高度(又叫行框的高度)由其組成元素和其他內容(如文本)的高度確定。行高line-height實際上隻影響行內元素和其他行內內容，而不會直接影響塊級元素
在行佈局中，替換元素和非替換元素並不相同，接下來將分別進行介紹
【行內非替換元素】
首先，對於行內非替換元素或匿名文本某一部分，font-size值確定了內容區的高度。如果一個行內元素的font-size爲15px，則內容區的高度爲15px
內容區加上行間距等於行內框。如果一個行內非替換元素的font-size爲15px，line-height爲21px，則相差6px。用戶代理將這6像素一分爲二，將其一半分別應用到內容區的頂部和底部，這就得到了行內框
當line-height小於font-size時，行內框實際上小於內容區
行框定義爲行中最高行內框的頂端到最低行內框底端之間的距離，而且各行框的頂端挨着上一行行框的底端
如果一行中存在行高相同但字體大小不同的行內元素，雖然所有行內框大小都相等，但它們排列得並不整齊，因爲文本都是按照基線對齊的
如果改變行內框的垂直對齊，比如設置垂直對齊爲4px，這會同時提升其內容區和行內框。如果設置的該行內框是行中的最高點，則會把整個行框的頂端也向上移動4像素
框屬性
如果一個行內元素存在邊框或內邊距，而沒有設置一個足夠大的行高line-height來容納它們，就有覆蓋其他行的危險
內邊距和邊框不會改變內容區的尺寸，不過它會影響這個元素行內框的高度，但並不會影響行框的生成和佈局，即不改變行高。至於外邊距，它不會應用到行內非替換元素的頂端和底端，不會影響行框的高度
儘管內邊距、邊框和外邊距不影響行高，但是它們確實能影響一個元素內容的佈局。可能將文本推離其左右兩端。實際上，如果左、右兩外邊距爲負，可能會把文本拉近行內元素，甚至導致重疊
margin-left、padding-left、border-left應用到元素的開始處；而margin-right、padding-right、border-right應用到元素的結尾處
div{width: 200px;border: 1px solid red;
}
span{border: 1px solid black;background-color: yellow;padding: 6px;margin: 6px;font-size: 30px;line-height: 50px;
}
<div><span>測試文字測試文字測試文字</span></div>
【行內替換元素】
一般地，行內替換元素(如圖像)都有固有的高度和寬度。有固有高度的替換元素可能導致行框比正常要高。但這不會改變行中任何元素的行高line-height值，包括替換元素本身。相反，只是讓行框高度恰好能包含替換元素
行內替換元素需要行高line-height值，從而在垂直對齊時能夠正確地定位元素。因爲垂直對齊vertical-align的百分數值是相對於元素的行高line-height來計算的。對於垂直對齊來說，圖像本身的高度無關緊要，關鍵是line-height的值
由於行內替換元素行內框的高度由高度height、內邊距padding、邊框border和外邊距margin共同決定。所以，盒模型屬性的變化會影響行內框的高度，進而可能會影響行框的高度
默認地，行內替換元素位於基線上。如果向替換元素增加下內邊距、外邊距或邊框，內容區會上移。替換元素並沒有自己的基線，所以相對來說最好的辦法是將其行內框的底端與基線對齊。因此，實際上是下外邊距邊界與基線對齊
div{width: 300px;border: 1px solid red;
}
span{border: 1px solid black;background-color: yellow;font-size: 30px;line-height: 50px;
}
img{height: 26px;padding: 2px;margin: 2px;
}
專門建立的學習Q-q-u-n： 731771211，分享學習方法和需要注意的小細節，不停更新最新的教程和學習技巧
（從零基礎開始到前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）
<div><span>測試文字測試<
img src="backup/lamp.gif" alt="測試圖片">文字測試文字</span></div>
最後
關於盒模型，基本內容一般都比較熟悉，比較重要的內容就是水平方向和垂直方向上auto不同情況的分析