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

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	與指定值相同