CSS系列:CSS中盒子之間的關係

libingql發表於2014-12-26

1. 標準文件流

  標準文件流是值在不使用其他的雨排列和定位相關的特殊CSS規則時,各種元素的排列規則。

1.1 塊級元素(block level)

  塊級元素不會排在同一行中,總是以一個塊的形式表現出來,並且跟同級的塊級元素依次豎直排列,左右撐滿。

1.2 行內元素(inline)

  行內元素本身不佔用獨立的區域,只在其他元素的基礎上指出一定的範圍。

  行內元素在DOM樹中同樣是一個節點,從DOM的角度來看,塊級元素與行內元素沒有區別,都是樹上的一個節點;而從CSS的角度來看,二者區別在於塊級元素擁有自己的區域,行內元素則沒有。

  div是一個塊級元素,它包圍的元素會自動換行。span是一個行內元素,在它的前後不會換行。

2. 盒子在標準文件流中的定位原則

  行內元素之間的水平margin,塊級元素之間的數值margin。

相關文章