常規流
盒模型：規定單個盒子的規則
視覺格式化模型（佈局規則）：頁面中的多個盒子排列規則
視覺格式化模型，大體上將頁面中盒子的排列分爲三種方式：
- 常規流
- 浮動
- 定位
常規流佈局
常規流、文檔流、普通文檔流、常規文檔流
所有元素，默認情況下，都屬於常規流佈局
總體規則：塊盒獨佔一行，行盒水平依次排列
包含塊（containing block）：每個盒子都有它的包含塊，包含塊決定了盒子的排列區域。
絕大部分情況下：盒子的包含塊，爲其父元素的內容盒
塊盒
1.每個塊盒的總寬度，必須剛好等於包含塊的寬度
寬度的默認值是auto
margin的取值也可以是auto，默認值0
auto：將剩餘空間吸收掉
width吸收能力強於margin
若寬度、邊框、內邊距、外邊距計算後，仍然有剩餘空間，該剩餘空間被margin-right全部吸收
在常規流中，塊盒在其包含快中居中，可以定寬、然後左右margin設置爲auto。(position:relative)
2.每個塊盒垂直方向上的auto值
height:auto， 適應內容的高度
margin:auto， 表示0
3. 百分比取值
padding、寬、margin可以取值爲百分比
以上的所有百分比相對於包含塊的寬度。
高度的百分比：
1）. 包含塊的高度是否取決於子元素的高度，設置百分比無效
2）. 包含塊的高度不取決於子元素的高度，百分比相對於父元素高度
4. 上下外邊距的合併
兩個常規流塊盒，上下外邊距相鄰，會進行合併。
兩個外邊距取最大值。
浮動
視覺格式化模型，大體上將頁面中盒子的排列分爲三種方式：
- 常規流
- 浮動
- 定位
應用場景
- 文字環繞
- 橫向排列
浮動的基本特點
修改float屬性值爲：
- left：左浮動，元素靠上靠左
- right：右浮動，元素靠上靠右
默認值爲none
- 當一個元素浮動後，元素必定爲塊盒(更改display屬性爲block)
- 浮動元素的包含塊，和常規流一樣，爲父元素的內容盒
盒子尺寸
- 寬度爲auto時，適應內容寬度
- 高度爲auto時，與常規流一致，適應內容的高度
- margin爲auto，爲0.
- 邊框、內邊距、百分比設置與常規流一樣
盒子排列
- 左浮動的盒子靠上靠左排列
- 右浮動的盒子考上靠右排列
- 浮動盒子在包含塊中排列時，會避開常規流塊盒
- 常規流塊盒在排列時，無視浮動盒子
- 行盒在排列時，會避開浮動盒子
- 外邊距合並不會發生
如果文字沒有在行盒中，瀏覽器會自動生成一個行盒包裹文字，該行盒叫做匿名行盒。
高度坍塌
高度坍塌的根源：常規流盒子的自動高度，在計算時，不會考慮浮動盒子
清除浮動，涉及css屬性：clear
- 默認值：none
- left：清除左浮動，該元素必須出現在前面所有左浮動盒子的下方
- right：清除右浮動，該元素必須出現在前面所有右浮動盒子的下方
- both：清除左右浮動，該元素必須出現在前面所有浮動盒子的下方
補充
- 左浮動的盒子向上向左排列
- 右浮動的盒子向上向右排列
- 浮動盒子的頂邊不得高於上一個盒子的頂邊
- 若剩餘空間無法放下浮動的盒子，則該盒子向下移動，直到具備足夠的空間能容納盒子，然後再向左或向右移動
定位
視覺格式化模型，大體上將頁面中盒子的排列分爲三種方式：
- 常規流
- 浮動：float
- 定位：position
浮動和定位元素寬度呈包裹性
定位：手動控制元素在包含塊中的精準位置
涉及的CSS屬性：position
position屬性
- 默認值：static，靜態定位（不定位）
- relative：相對定位
- absolute：絕對定位
- fixed：固定定位
一個元素，只要position的取值不是static，認爲該元素是一個定位元素。
定位元素會脫離文檔流（相對定位除外）
一個脫離了文檔流的元素：
- 文檔流中的元素擺放時，會忽略脫離了文檔流的元素
- 文檔流中元素計算自動高度時，會忽略脫離了文檔流的元素
相對定位
不會導致元素脫離文檔流，只是讓元素在原來位置上進行偏移。
可以通過四個CSS屬性對設置其位置：
- left
- right
- top
- bottom
盒子的偏移不會對其他盒子造成任何影響。
絕對定位
- 寬高爲auto，適應內容
- 包含塊變化：找祖先中第一個定位元素，該元素的填充盒爲其包含塊。若找不到，則它的包含塊爲整個網頁（初始化包含塊）
固定定位
其他情況和絕對定位完全一樣。
包含塊不同：固定爲視口（瀏覽器的可視窗口）
固定定位和絕對定位一開始left 和 right都有值，而且優先級最低。視口總寬度 = margin + padding + width + left
定位下的居中
某個方向居中：
- 定寬（高）
- 將左右（上下）距離設置爲0
- 將左右（上下）margin設置爲auto
絕對定位和固定定位中，margin爲auto時，會自動吸收剩餘空間
多個定位元素重疊時
堆疊上下文
設置z-index，通常情況下，該值越大，越靠近用戶
只有定位元素設置z-index有效
z-index可以是負數，如果是負數，則遇到常規流、浮動元素，則會被其覆蓋
補充
- 絕對定位、固定定位元素一定是塊盒
- 絕對定位、固定定位元素一定不是浮動
- 沒有外邊距合併