圖文詳解css布局方式

css 布局方式的總覽

css 布局的方式分為的部分

css 的布局方式

• 盒子內部的布局

• 文本的布局

• 盒子本身的布局

• 盒子之間的布局 visual formmatting

• BFC ( block formatting context ) 布局上下文下的布局

• IFC 布局上下文下的布局

• FFC 布局上下文下的布局

• table 布局上下文下的布局

• css grid 布局上下文下的布局

• absolute 布局上下文下的布局

• float布局上下文下的布局、

• 脫離正常normal flow的盒子的布局

• 正常normal flow下的盒子的布局

1. 盒子內部的布局

• 文本的布局

• 有個line boxes包裹每行文字，這是看不見的；

• line boxes 會取子項目最高的 line-height

• 通過line-height 可以設定單行文本的水平的置中

• box 布局
  

圖片的來源w3c

2. 盒子之間的布局

• absolute 布局 (脫離文檔流)

• float 布局 (脫離文檔流)

• normal flow (正常文檔流的布局) (上下文)

• 滿足下方任意一個條件，會為子項目，建立一個新的 bfc的上下文

• 根項目 (body)

• float 元素不為 none

• overflow 不為 visible

• display 為inline-block,table-cell,table-caption

• postition 的值為 absolute , fixed

• bfc ( block formatting context ) 塊級文檔上下文

• ifc (Inline formatting contexts ) 行內塊級上下文

• ffc ( Flex Formatting Contexts ) 伸縮格式化上下文

• table ( table formatting context ) 表格版面配置上下文

• grid ( grid formatting context ) 網格格式化上下文