視覺格式化模型(布局規則):頁面中的多個盒子排列規則
視覺格式化模型 大體上將頁面中盒子的排列分為三種方式:
1. 常規流
2. 浮動
3. 定位
總體規則 : 塊盒獨佔一行,行盒水平依次排列
包含塊(containing block):每個盒子都有它的包含塊,包含快決定了盒子的排列區域
絕大部分情況下:盒子的包含塊為其父元素的內容盒
1. 每個塊盒的總寬度,必須剛好等於包含塊的寬度
寬度的預設值是auto
auto:將剩餘空間吸收掉
當width盒margin都為auto時 width吸收能力強於margin
若寬度 邊框 內邊距 和外邊距 計算後,仍然有剩餘空間,該剩餘空間被margin-right全部吸收
在常規流中 塊盒在其他包含塊中居中,可以定寬,然後左右margin設定為auto
2. 每個塊盒垂直方向上的auto
height:auto 適應內容的高度
margin:auto 表示0
3. 百分比取值
padding 寬高 margin 可以取值為百分比
以上所有百分比相對於**包含塊的寬度**
高度的百分比:
1). 包含塊的高度取決於子元素的高度 這種情況設定百分比無效
2). 包含塊的高度不取決於子元素的高度,百分比相對于父元素高度
4. 上下外邊距的合併
兩個常規流塊盒,上下邊距相鄰 會進行合併. 兩個外邊距取最大值
CSS常規流布局
盒模型 規定單個盒子的規則 視覺格式化 布局規則 頁面中的多個盒子排列規則 視覺格式化模型 大體上將頁面中盒子的排列分為三種方式 常規流浮動 定位常規流 文件流 普通文件流 常規文件流 所有元素，預設情況下，都屬於常規流布局 總體規則 塊盒獨佔一行，行盒水平依次排列 包含塊 containing b...
常規流布局
盒模型 規定單個盒子的規則 視覺格式化模型 布局規則 頁面中的多個盒子排列規則 視覺格式化模型大體上將頁面中盒子的排列分為三種 常規流浮動定位 又稱為 常規流 文件流。普通文件流 常規文件流 包含塊 containing block 每個盒子都有它的包含塊，包含塊決定盒子的排列區域 絕大部分情況下 ...
Css規範整理 3 1 常規流布局 核心思想
css2.1標準中沒有 明確提出，在最新的 css display module level 3 中提出了，雖然是草案，但其中的思想與前者一脈相承 display屬性定義了乙個元素的顯示型別，它包含元素如何生成盒的兩個基本特徵 內部顯示型別 inner display type 它定義 如果它是乙個...