CSS常規流布局

盒模型：規定單個盒子的規則

視覺格式化：（布局規則）頁面中的多個盒子排列規則

視覺格式化模型：大體上將頁面中盒子的排列分為三種方式：

常規流浮動

定位常規流、文件流、普通文件流、常規文件流

所有元素，預設情況下，都屬於常規流布局

總體規則：塊盒獨佔一行，行盒水平依次排列

包含塊（containing block）：每個盒子都有他的包含塊，包含塊決定了盒子的排列區域。

絕大部分情況下:盒子的包含塊，為其父元素的內容盒

塊盒

每個塊盒的總寬度，必須更好等於包含塊的寬度

寬度的預設值是auto

margin的取值也可以是auto，預設值0

auto：將剩餘空間吸收掉

width吸收能力強於margin

若寬度、邊框、內邊距計算後，仍然有剩餘空間，該剩餘空間被margin-right全部吸收

在常規流中，塊盒在其包含塊中居中，可以定位寬、然後左右margin設定為auto。

每個塊和垂直方向上的auto值

height：auto，適應內容的高度

margin：auto，表示0

百分比取值

padding、寬高、margin可以取值為百分比

以上的所有百分比相對於包含快的寬度。

高度的百分比：

1). 包含塊的高度是否取決於子元素的高度，設定百分比無效

2). 包含塊的高度不取決於子元素的高度，百分比相對于父元素高度

上下外邊距的合併

兩個常規流塊盒，上下外邊距相鄰，會進行合併。

兩個外邊距取最大值。

css 常規流 常規流布局

視覺格式化模型 布局規則 頁面中的多個盒子排列規則 視覺格式化模型 大體上將頁面中盒子的排列分為三種方式 1.常規流 2.浮動 3.定位所有元素 預設情況下都屬於常規流布局 總體規則 塊盒獨佔一行,行盒水平依次排列 包含塊 containing block 每個盒子都有它的包含塊,包含快決定了盒子的...

常規流布局

盒模型 規定單個盒子的規則 視覺格式化模型 布局規則 頁面中的多個盒子排列規則 視覺格式化模型大體上將頁面中盒子的排列分為三種 常規流浮動定位 又稱為 常規流 文件流。普通文件流 常規文件流 包含塊 containing block 每個盒子都有它的包含塊，包含塊決定盒子的排列區域 絕大部分情況下 ...

Css規範整理 3 1 常規流布局 核心思想

css2.1標準中沒有 明確提出，在最新的 css display module level 3 中提出了，雖然是草案，但其中的思想與前者一脈相承 display屬性定義了乙個元素的顯示型別，它包含元素如何生成盒的兩個基本特徵 內部顯示型別 inner display type 它定義 如果它是乙個...