常規流布局

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

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

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

常規流浮動定位

又稱為：常規流、文件流。普通文件流、常規文件流

包含塊（containing block)：每個盒子都有它的包含塊，包含塊決定盒子的排列區域

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

塊盒

每個塊盒的總寬度margin+border+padding+content，必須剛好等於包含塊的寬度

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

百分比取值

外邊距的合併

兄弟元素：兩個常規流塊盒，上下外邊距相鄰會合併，取最大值

父子元素：父子元素上邊距相鄰合併

CSS常規流布局

盒模型 規定單個盒子的規則 視覺格式化 布局規則 頁面中的多個盒子排列規則 視覺格式化模型 大體上將頁面中盒子的排列分為三種方式 常規流浮動 定位常規流 文件流 普通文件流 常規文件流 所有元素，預設情況下，都屬於常規流布局 總體規則 塊盒獨佔一行，行盒水平依次排列 包含塊 containing b...

css 常規流 常規流布局

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

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

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