盒模型：規定單個盒子的規則
視覺格式化模型（布局規則）：頁面中的多個盒子排列規則
視覺格式化模型，大體上將頁面中盒子的排列分為三種方式：
常規流浮動
定位常規流、文件流、普通文件流、常規文件流
所有元素，預設情況下，都屬於常規流布局
總體規則：塊盒獨佔一行，行盒水平依次排列
包含塊（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屬性值為：
預設值為none
當乙個元素浮動後，元素必定為塊盒(更改display屬性為block)
浮動元素的包含塊，和常規流一樣，為父元素的內容盒
寬度為auto時，適應內容寬度
高度為auto時，與常規流一致，適應內容的高度
margin為auto，為0.
邊框、內邊距、百分比設定與常規流一樣
左浮動的盒子靠上靠左排列
右浮動的盒子考上靠右排列
浮動盒子在包含塊中排列時，會避開常規流塊盒
常規流塊盒在排列時，無視浮動盒子
行盒在排列時，會避開浮動盒子
外邊距合併不會發生
如果文字沒有在行盒中，瀏覽器會自動生成乙個行盒包裹文字，該行盒叫做匿名行盒。高度坍塌的根源：常規流盒子的自動高度，在計算時，不會考慮浮動盒子
清除浮動，涉及css屬性：clear
視覺格式化模型，大體上將頁面中盒子的排列分為三種方式：
常規流浮動：float
定位：position
浮動和定位元素寬度呈包裹性
定位：手動控制元素在包含塊中的精準位置
涉及的css屬性：position
乙個元素，只要position的取值不是static，認為該元素是乙個定位元素。
定位元素會脫離文件流（相對定位除外）
乙個脫離了文件流的元素：
文件流中的元素擺放時，會忽略脫離了文件流的元素
文件流中元素計算自動高度時，會忽略脫離了文件流的元素
不會導致元素脫離文件流，只是讓元素在原來位置上進行偏移。
可以通過四個css屬性對設定其位置：
盒子的偏移不會對其他盒子造成任何影響。
寬高為auto，適應內容
包含塊變化：找祖先中第乙個定位元素，該元素的填充盒為其包含塊。若找不到，則它的包含塊為整個網頁（初始化包含塊）
其他情況和絕對定位完全一樣。
包含塊不同：固定為視口（瀏覽器的可視視窗）
固定定位和絕對定位一開始left 和 right都有值，而且優先順序最低。視口總寬度 = margin + padding + width + left某個方向居中：
定寬（高）
將左右（上下）距離設定為0
將左右（上下）margin設定為auto
絕對定位和固定定位中，margin為auto時，會自動吸收剩餘空間
堆疊上下文
設定z-index，通常情況下，該值越大，越靠近使用者
只有定位元素設定z-index有效
z-index可以是負數，如果是負數，則遇到常規流、浮動元素，則會被其覆蓋
css 常規流 常規流布局
視覺格式化模型 布局規則 頁面中的多個盒子排列規則 視覺格式化模型 大體上將頁面中盒子的排列分為三種方式 1.常規流 2.浮動 3.定位所有元素 預設情況下都屬於常規流布局 總體規則 塊盒獨佔一行,行盒水平依次排列 包含塊 containing block 每個盒子都有它的包含塊,包含快決定了盒子的...
CSS常規流布局
盒模型 規定單個盒子的規則 視覺格式化 布局規則 頁面中的多個盒子排列規則 視覺格式化模型 大體上將頁面中盒子的排列分為三種方式 常規流浮動 定位常規流 文件流 普通文件流 常規文件流 所有元素，預設情況下，都屬於常規流布局 總體規則 塊盒獨佔一行，行盒水平依次排列 包含塊 containing b...
CSS布局 三欄布局
題外話 抓狂系列片之叄個我。三欄布局要求說明 兩邊固定寬度，中間自適應，頂部對齊 html文件結構有三種 內層div順序不同 左右中 左中右。實現效果 方法如下 1.左右中 對左右子元素使用了浮動屬性 float 從而脫離了文件流，如果按照正常左中右的順序，會導致右子元素出現在中間子元素的右下方。所...