CSS layout入門

元素與盒子

在HTML中常使用的概念是元素，而在CSS中，佈局的基本單位是盒，盒總是矩形的。

元素與盒子並非一一對應的關係，一個元素可能產生多個盒，CSS規則中的偽元素也可能產生盒，display屬性為none的元素則不產生盒。

除了元素之外，HTML中的文字節點也可能產生盒子。

盒模型

一個盒子包含了內容(content)、邊框(border)、內邊距(padding)、外邊距(margin)。下圖展示了盒子模型的直覺意義：

盒子的尺寸（width與height）定義受到box-sizing屬性的影響。 box-sizing可選擇content-box(預設), padding-box和border-box三種模式。

正常流

正常流是頁面，大部分盒排佈於正常流。正常流中的盒必定位於某一格式化上下文中，正常流中有兩種格式化上下文：區塊級格式化上下文（block formatting context，簡稱BFC）和行內格式化上下文（inline formatting context,IFC）。

在區塊層級格式化上下文中，盒子呈現縱向排布，在行內格式化上下文中，盒則呈現橫向排布。

正常流根容器中是區塊層級格式化上下文，不同的盒子可能會在內部產生行內格式化上下文或區塊層級格式化上下文。

塊級與行內級

正常流中的盒分為塊級與行內級兩種，任何一個行內級盒都不能夠直接被放入塊級格式化上下文中。如果有一個HTML元素產生了一個行內盒，而其所在的上下文是塊級的話，那麼應當為它生成一個匿名塊級盒，匿名塊級盒會在內部生成行內格式化上下文。

元素的display屬性會決定盒子是行內級還是區塊級：

• block, table, flex, grid, list-item 為區塊級

• inline, inline-block, inline-table, inline-flex, inline-grid 為行內級

 

#格式化上下文

display同時也可能決定元素內部如何顯示，一些容器型元素產生的盒子會產生BFC和IFC以外的格式化上下文。

有一類盒子被稱為塊容器，它們能夠包含塊級盒。塊容器要么創建區塊級格式化上下文，這樣它內部僅包含塊級盒，要么創建一個行內格式化上下文，這樣它內部僅包含行內級元素。 （也就是說，塊容器中不可能既包含塊級盒，又包含行內級盒，一旦他的子盒中有塊級盒，所有行內級盒都會被自動創建匿名盒包裹）。

在非區塊級格式化上下文中的區塊容器總是會建立新的區塊級格式化上下文：如display為inline-blocks, table-cells, 和table-captions所產生的盒子。而自身也在區塊層級格式化上下文中的區塊容器，則只有overflow不為visible的情況下才會建立新的區塊層級格式化上下文。

絕對定位和浮動的區塊容器則總是會建立新的區塊級格式化上下文。

display值為table或inline-table的元素將會產生表格（table），表格內部會使用特殊的格式化方式來排佈其內部元素。

display值為grid或inline-grid的元素將會產生格元素（grid element），與table情形類似，它內部也是使用特殊的格式化方式來牌不其內部元素，

display值為flex或inline-flex的元素將會產生自適應容器（flex container），自適應容器在其內部產生自適應格式化上下文（flex formatting context）。

以上是CSS layout入門的詳細內容。更多資訊請關注PHP中文網其他相關文章！