CSS2中盒模型與佈局的一些概念關係

胡斐發表於2019-01-06
CSS模型

CSS的一些名詞和概念

用來幫你更明確地去描述HTML/CSS世界的事物。

box

在CSS中，一個元素就可以看作一個box。具體資訊可以參考盒模型的解釋，這裡暫且不作展開。

containing blocks

Box的位置和大小時根據一個稱為containing blocks的邊界進行計算的。

block-level elements 和 block boxes

block-level elements 一般指HTML中的特定型別的元素，比如div，p，ul等。
block boxes 指形成一個block formatting contexts的boxes。可以確定的時正常的block-level（沒有改變它的position，display等預設屬性值）可以形成一個BFC。But，如果元素等display屬性值為 `block`, `list-item`, 或 `table`中的一種，也可以對外表現出塊級元素的行為。也會成為一個block box。

BFC（Block formatting contexts）

哪些情況會產生一個BFC：

  • 根元素
  • float元素（float屬性不是none）
  • display： block，table-cell，table-captain，list-item， table、table-row、 table-row-group、table-header-group、table-footer-group
  • position是absolute的元素（絕對定位）
  • overflow不等於visible
  • flex 元素
  • grid 元素

在一個BFC中，形成一個獨立的佈局環境，裡面元素等佈局位置不會受外部元素影響。

IFC （Inline formatting contexts）

與BFC對應，一個行內元素預設也會形成一個IFC（行內格式化上下文）。IFC有個不同於一般的常識的特性：

當inline-level box寬度大於父容器寬度時會被拆分成多個inline-level box;
當屬性direction為ltr時，margin/border/padding-left將作用於第一個的inline-level box，margin/border/padding-right將作用於最後一個的 inline-level box;
若屬性direction為rtl時，margin/border/padding-right將作用於第一個的inline-level box，margin/border/padding-left將作用於最後一個的inline-level box;

<p style="margin-left:100px;margin-right:20px;border:1px dashed #ccc;">
    <span class="before"> before </span>
    <span class="cotent" style="margin-left: 100px; margin-right: 20px;"> An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a `display` value of `inline` generates an inline box. Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box. </span>
    <span class="after"> after </span>
</p>

注意示例中，content 元素這段話開頭和結尾的外邊距大小。

在CSS2中， 一個盒子的定位模式通常是一下三種：

  • Normal flow：正常的文件流是由 BFC、IFC和position是relative的 block boxes或inline boxes 組成。
  • Floats float屬性值不等於none的元素通常稱之為浮動元素。
  • absolute positioning （絕對定位元素） 絕對定位的元素完全從正常的文件流中移除，它的位置不會影響它後面元素的位置。

positioned element

position屬性值不是static的元素稱之positioned element。

display，position和float的相對關係

我們知道，display，position和float都會對元素的佈局位置表現產生影響。那麼它們三者之間是如何起作用的呢？

  1. 如果display:none; position和float將不會再起任何作用；
  2. 如果position屬性是absolute或fixed，則float屬性置為none（可以理解為不再存在float行為，即使手動設定了float不為none）， display行為依據下表的規則展示；元素的定位會依據top/right/bottom/left進行計算。
  3. 如果float屬性值不為none，則display屬性依據下表的規則展示；
  4. 如果元素是根元素，則display的展示依據下表規則表現。
  5. 其它情況，依據display設定的值進行處理
指定值 最終表現值
inline-table table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block block
others 與指定值相同

相關文章