CSS中各種佈局的背後,實質上是各種*FC的組合。CSS2.1中只有BFC和IFC,CSS3 中還增加了FFC和GFC。
盒模型(BoxModel)
上圖為W3C標準盒模型,另外還有一種IE盒模型(IE6以下),唯一的區別就是:前者width= content,後者width= content + padding + border
若要將IE盒模型轉換為標準盒模型,需要在文檔頂部加上聲明;很有意思的是,後來CSS3中也增加了box-sizing屬性,box-sizing:content-box即標準盒模型,box-sizing:border-box即IE盒模型(width包含內邊距和邊框),W3C反過來又承認了微軟,也是有意思。
視覺格式化模型(VisualFormatting Model)
視覺格式化模型(visualformattingmodel)是用來處理文檔並將它顯示在視覺媒體上的機制,根據上述的盒模型,為文檔元素生成盒(Box)。通俗的說,視覺格式化模型就是文檔裡的盒子佈局呈現的一種規則。
影響佈局的因素
盒的尺寸和類型定位方案 PositioningScheme(常規流,浮動和絕對定位)文檔樹中元素之間的關係外部信息(如:視口大小,圖片的固有尺寸等)
FC…是誰在說髒話?!FormattingContext – 格式化上下文,*FC就是視覺格式化模型,用來描述盒子佈局規則。
前方大波概念來襲!
塊級元素、塊級盒、塊容器盒、塊盒、匿名塊盒、行內級元素、行內級盒、原子行內級盒、原子行內盒、行盒、匿名行內盒、插入盒…要報警了!!!這些真的不是我YY出來的,W3C裡真的有這麼多概念好嗎!!!感覺進坑了啊!!!headache…來吧,一個個捋清楚…-_-|||
塊級元素(Block-levelelements):當元素的CSS屬性 display:block/ list-item / table 時,它就是是塊級元素block-level,視覺上呈現為塊,豎直排列。每個塊級元素生成一個主要的塊級盒(PrincipalBlock-level Box) 來包含其後代盒和生成的內容,同時參與定位體系(PositioningScheme) 。某些塊級元素還會在主要盒之外產生額外的盒:list-item元素。這些額外的盒會相對於主要盒來擺放。塊級盒(Block-levelboxes):由塊級元素生成,參與塊級格式化上下文(BFC)。描述元素跟它的父元素與兄弟元素之間的表現。
定位方案(Positioningschemes)
-常規流(Normalflow)
CSS2.1中,常規流包括塊級盒的塊格式化,行內盒的行內格式化,以及塊級盒和行內級盒的相對定位。
-浮動(Floats)
在浮動模型中,盒首先根據常規流佈局,然後從常規流中脫離並儘可能地向左或向右位移。內容可以佈局在浮動周圍。
-絕對定位(Absolutepositioning)
在絕對定位模型中,盒完全從常規流中脫離(對後面的同胞元素無影響)並根據包含塊來分配位置。
BFC– Block Formatting Context
觸發條件
根元素或其它包含它的元素浮動 float:left/right/inherit絕對定位元素 "western" >行內塊 display:inline-block表格單元格 display:table-cell表格標題 display:table-caption溢出元素 overflow:hidden/scroll/auto/inherit彈性盒子 display:flex/inline-flex佈局規則
內部的Box會在垂直方向,一個接一個地放置。Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊。每個元素的marginbox的左邊,與包含塊borderbox的左邊相接觸(對於從左往右的格式化,否則相反)。即使存在浮動也是如此。BFC的區域不會與floatbox重疊。BFC就是頁面上的一個隔離的獨立容器,容器裡面的子元素不會影響到外面的元素。反之也如此。計算BFC的高度時,浮動元素也參與計算應用場景
閉合浮動:浮動區域不疊加到BFC區域上防止與浮動元素重疊防止margincollapsefloat元素高度塌陷…IFC– Inline Formatting Contexts
觸發條件
一個塊級元素中僅包含內聯級別元素
佈局規則
內部的盒子會在水平方向,一個接一個地放置。這些盒子垂直方向的起點從包含塊盒子的頂部開始。擺放這些盒子的時候,它們在水平方向上的padding、border、margin所佔用的空間都會被考慮在內。在垂直方向上,這些框可能會以不同形式來對齊(vertical-align):它們可能會使用底部或頂部對齊,也可能通過其內部的文本基線(baseline)對齊。能把在一行上的框都完全包含進去的一個矩形區域,被稱為該行的行框(linebox)。行框的寬度是由包含塊(containingbox)和存在的浮動來決定。IFC中的linebox 一般左右邊都貼緊其包含塊,但是會因為float元素的存在發生變化。float元素會位於IFC與與linebox 之間,使得linebox 寬度縮短。IFC中的linebox 高度由CSS行高計算規則來確定,同個IFC下的多個linebox 高度可能會不同(比如一行包含了較高的圖片,而另一行只有文本)當inline-levelboxes 的總寬度少於包含它們的linebox 時,其水平渲染規則由text-align屬性來確定,如果取值為justify,那麼瀏覽器會對inline-boxes(注意不是inline-table和inline-blockboxes)中的文字和空格做出拉伸。當一個inlinebox 超過linebox 的寬度時,它會被分割成多個boxes,這些boxes被分佈在多個linebox 裡。如果一個inlinebox 不能被分割(比如只包含單個字符,或word-breaking機制被禁用,或該行內框受white-space屬性值為nowrap或pre的影響),那麼這個inlinebox 將溢出這個linebox。應用場景
水平居中:當一個塊要在環境中水平居中時,設置其為inline-block則會在外層產生IFC,通過設置父容器text-align:center則可以使其水平居中。垂直居中:創建一個IFC,用其中一個元素撐開父元素的高度,然後設置其vertical-align:middle,其他行內元素則可以在此父元素下垂直居中。FFC– Flex Formatting Contexts
觸發條件
當display的值為flex或inline-flex時,將生成彈性容器(FlexContainers),一個彈性容器為其內容建立了一個新的彈性格式化上下文環境(FFC)
佈局規則
設置為 flex的容器被渲染為一個塊級元素設置為 inline-flex的容器則渲染為一個行內元素彈性容器中的每一個子元素都是一個彈性項目。彈性項目可以是任意數量的。彈性容器外和彈性項目內的一切元素都不受影響。簡單地說,Flexbox定義了彈性容器內彈性項目該如何佈局GFC– GridLayout Formatting Contexts
觸發條件
當為一個元素設置display值為grid的時候,此元素將會獲得一個獨立的渲染區域
佈局規則
通過在網格容器(gridcontainer)上定義網格定義行(griddefinition rows)和網格定義列(griddefinition columns)屬性各在網格項目(griditem)上定義網格行(gridrow)和網格列(gridcolumns)為每一個網格項目(griditem)定義位置和空間