一、基本概念
（一）視覺格式化模型
- 視覺格式化模型（visual formatting model）：CSS的一種機制，它規定了頁面中的多個盒子如何布局
- css的一種機制，視覺格式化模型屬於css范疇
- 多個盒子如何布局，中的每個HTML元素都會在頁面盒子中生成
- 這些盒子如何排列、如何相互影響，由視覺格式化模型定義
- 視覺格式化模型是一套非常復雜的機制，包含錯綜復雜的CSS規范
- 本章的課程從實用的角度出發，僅學習在划分頁面區域的時候需要的核心知識
- 由於划分頁面區域時幾乎都使用的是塊盒，因此，本章仍然只涉及塊盒
（二）視口
- 視口（viewport）：可視窗口，通常指瀏覽器的可視區域
- 視口的尺寸僅受到瀏覽器可視窗口大小的影響，和內容無關
- 當網頁內容的尺寸超過視口尺寸時，瀏覽器會出現滾動條
（三）包含塊
- 包含塊（containing block）：每個元素都有一個包含塊，它是指元素在頁面中擺放的區域
- 通常情況下，元素的包含塊是它父元素的內容盒（content-box）
- 包含塊：初始化包含塊（initial containing block）初始化包含塊是瀏覽器在渲染前自動生成的一塊區域
- 包含塊（containing block）：每個元素都有一個包含塊，它是指元素在頁面中擺放的區域
- 通常情況下，元素的包含塊是它父元素的內容盒（content-box）
- 根元素的包含塊是初始化包含塊（initial containing block）
二、定位體系概述
（一）什么是定位體系
- 視覺格式化模型規定，定位體系一共有三種：常規流（normal flow）浮動（float）絕對定位（absolute positioned）
- 任何一個元素，必須屬於其中一種定位體系
- 不同的定位體系中，元素在包含塊中的尺寸和位置會有一些差異
（二）定位體系判定
- position是一個CSS屬性，默認值為static
- float是一個CSS屬性默認值為none
三、盒模型的定位體系
1．定位體系影響盒模型等於最終盒子尺寸；定位體系等於盒子尺寸
2．盒模型中的尺寸：margin：px、em、%、auto；border：px、em；padding：px、em、%；width：px、em、%、auto；height：px、em、%、auto
3．尺寸為設定的值，與定位體系無關
4．尺寸是包含塊尺寸的百分比，margin、padding、width的百分比：是包含塊寬度的百分比；height的百分比（很少使用）
5．尺寸受到定位體系的影響
6．不同的定位體系，auto的計算規則不一樣
四、常規流
（一）常規流
- 常規流，又叫做普通流、文檔流、普通文檔流
- 常規流是最常見的定位體系，所有元素默認狀態下都是常規流定位
（二）盒模型中的auto值
- 常規流盒子水平方向上的尺寸，必須等於包含塊的寬度
- margin為auto：0px；height為auto：適應內容的高度
- 水平方向：常規流盒子水平方向上的尺寸，必須等於包含塊的寬度，如果不行，則強行將margin-right設置為auto
- 垂直方向：margin為auto：0px；height為auto：適應內容的高度
五、盒子位置
- 盒子在包含塊的垂直方向上依次擺放，盒子在包含塊的垂直方向上依次擺放。
- 依次擺放：按照HTML元素的書寫順序從上到下擺放
- 依次擺放：按照HTML元素的書寫順序從上到下擺放
- 垂直方向上，若兩個外邊距相鄰，則進行合並（折疊）
- 垂直方向：水平方向上的外邊距不會合並
- 外邊距相鄰：兩個外邊距之間沒有border、padding和content
- 合並：均為正數取最大，均為負數取最小，一正一負則相加
- 左浮動的盒子向上向左排列
- 右浮動的盒子向上向右排列
- 浮動盒子的頂邊不得高於上一個盒子的頂邊
- 若剩余空間無法放下浮動的盒子，則該盒子向下移動，直到具備足夠的空間能容納盒子，然后再向左或向右移動
六、浮動
- 當元素的float屬性取值為left或right時，元素屬於浮動定位
七、當常規流遇上浮動
（一）常規流盒子和浮動盒子混合擺放
- 浮動盒子在擺放時，要避開常規流盒子
- 常規流盒子在擺放時，無視浮動盒子
（二）清楚浮動
- 對一個元素清除浮動，可以讓該元素在擺放時，出現在浮動元素的下方
- Clear：none（不清除浮動）/left（清除左浮動，元素在左浮動的盒子下方擺放）/right（清除右浮動，元素在右浮動的盒子下方擺放）/both（清除右浮動，元素在浮動的盒子下方擺放）
- Clear both：對最后一個子元素使用該值，可防止父元素高度坍塌
八、盒子的相對位置
- 相對位置，是指相對於盒子在原本定位體系下的位置，將盒子的position屬性設置為relative，以啟用相對位置
- 取值為static時：靜態位置，盒子在原本定位體系下的位置
- 取值為relative時：相對位置，盒子相對於原本的位置進行偏移
- 取值為absolute時：為絕對位置（絕對定位）
- 取值為fixed時：為固定位置（絕對定位）
九、絕對定位的概述
- 當浮動元素被設置為絕對定位，元素只能屬於一種定位體系
- 如果元素被設置為絕對定位，float屬性會被強制設置為none
- 絕對定位元素對其他元素的影響，絕對定位元素不會對其他任何元素造成任何影響
- 絕對定位元素的位置，可通過left、top、right、bottom來設置
- 絕對定位元素的包含塊：通常情況下，元素的包含塊是它父元素的內容盒（content-box），絕對定位元素除外
十、絕對定位的位置和尺寸
（一）盒子的位置
絕對定位中，盒子的位置由left、top、right、bottom四個屬性決定，它們表示盒子離包含塊邊緣的距離
（二）盒子中的auto值
- 大部分情況下，盒子中auto值計算規則和浮動盒子相同，少部分情況下，盒子中auto值需要適應盒子的位置
十一、堆疊級別
- 堆疊級別（stack level），它決定了元素誰顯示在前誰顯示在后
- 通常情況下，堆疊級別越高，顯示越靠前
- 通過z-index屬性可設置元素的堆疊級別
- 不要用於靜態位置的元素
- 盡量不要使用z-index
十二、塊級格式化上下文
- 全稱Block Formatting Context，簡稱BFC，它是一塊獨立的渲染區域，它規定了在該區域中，常規流塊盒的布局它是一塊獨立的渲染區域，它規定了在該區域中，常規流塊盒的布局
- 常規流塊盒在水平方向上，必須撐滿包含塊
- 常規流塊盒在包含塊的垂直方向上依次擺放
- 常規流塊盒若外邊距無縫相鄰，則進行外邊距合並
- 常規流塊盒的自動高度和擺放位置，無視浮動元素
- Bfc渲染區域：BFC渲染區域：這個區域由某個HTML元素創建，以下元素會在其內部創建BFC區域：根元素，浮動和絕對定位元素，overflow不等於visible的塊盒
- 不同的BFC區域，它們進行渲染時互不干擾
- 創建BFC的元素，隔絕了它內部和外部的聯系，內部的渲染不會影響到外部
- 創建BFC的元素，它的自動高度需要計算浮動元素
- 創建BFC的元素，它的邊框盒不會與浮動元素重疊
- 創建BFC的元素，不會和它的子元素進行外邊距合並
十三、彈性布局
- 一個盒子，如果將其display屬性設置為 flex ，該盒子變為彈性盒（彈性容器），該盒子的所有子元素，自動變為彈性項目。彈性盒本身按照自身的定位體系排列，彈性布局影響的僅僅是彈性盒中的彈性項目
- 屬性：
flex-direction ：更改主軸方向
row 行 默認值
row-reverse 反向 主軸從右向左
column 列 按主軸從上往下排列
column-reverse 按主軸從下往上
justify-content ：更改主軸對其方式
flex-start 默認值 主軸起點一次排列
flex-end 主軸終點對齊
center 主軸中線對齊
space-between 左右項目靠邊，中間平均分布
space-around 所有項目平均分布
align-items: 更改側軸對齊方式
stretch 默認值 拉伸
flex-start 側軸起點對齊
flex-end 側軸終點對齊
flex-center 側軸中線對齊
flex-wrap
wrap （換行）
nowrap （不換行）
align-content
規則：彈性項目寬度自動時，表示適應內容的寬度和高度。margin為自動時，會吸收彈性容器的剩余空間。
- 項目屬性
(1) order 更改彈性項目的排列順序，順序為從小到大進行排列
(2) flex-shrink 更改彈性項目的壓縮比例
1 默認
0 不壓縮
(3) flex-grow 更改彈性項目的增長比例
0 默認 不增長
(4) flex-basis 彈性項目在壓縮或增長前的基礎寬度，若不設置，默認值為auto，表示與width屬性值相同
(5) 速寫 flex：grow shrink basis; 同時設置增長、壓縮、基礎值