塊元素

（block element）一般是其他元素的容器元素，能容納其他塊元素或內聯元素。塊元素就好比一個四方塊，可以放其他的四方塊，並可以呈現在頁面上任何地方。

預設情況下塊元素，是獨佔一行的

常見的塊元素：

div、p、h1-h6、form（只能用來容納其他塊元素）、hr、table、ul、ol

等

高度，行高以及外邊距和內邊距都可控制

寬度預設是它的容器的100%，除非設定一個寬度

它可以容納內聯元素和其他塊元素

行內元素

（inline element）也叫內嵌元素或內聯元素，一般都是基於語義級（semantic）的基本元素。行內元素只能容納文字或者其他行內元素，常見行內元素有

a、span、img

。CSS權威指南》中文字顯示：任何不是塊級元素的可見元素都是行內元素。其表現的特性是“行佈局”形式，這裡的“行佈局”的意思就是說其表現形式始終以行進行顯示。比如，我們設定一個內聯元素border-bottom：1px solid #000；時其表現是以每行進行重複，

每一行下方都會有一條黑色的細線

。如果是塊級元素那麼所顯示的的黑線只會在塊的下方出現。

和其他元素都在一行上

高，行高及外邊距和內邊距不可改變

寬度就是它的文字或圖片的寬度，不可改變

行內元素只能容納文字或者其他行內元素

塊元素和行內元素的區別

塊元素，總是在新行上開始；行內元素，和其他元素都在一行上

塊元素，能容納其他塊元素或行內元素；而內聯元素，只能容納文字或者其他行內元素

塊元素中高度，行高以及頂和底邊距都可控制；內聯元素中高，行高及頂和底邊距不可改變

說白了，行內元素就好像一個

單詞

；塊級元素就好像一個

段落

，如果不另加定義的話，它將獨立一行出現

文件流

將窗體自上而下分成一行行， 並在每行中按從左至右的順序排放元素，即為

文件流

每個非浮動塊級元素都獨佔一行， 浮動元素則按規定浮在行的一端。 若當前行容不下， 則另起新行再浮動

內聯元素也不會獨佔一行。 幾乎所有元素（包括塊級，內聯和列表元素）均可生成子行， 用於擺放子元素

有

三種情況

將使得元素脫離文件流而存在，分別是

浮動，絕對定位， 固定定位

。 但是在IE中浮動元素也存在於文件流中

浮動元素不佔任何正常文件流空間，而浮動元素的定位還是基於正常的文件流，然後從文件流中抽出並儘可能遠的移動至左側或者右側。文字內容會圍繞在浮動元素周圍。當一個元素從正常文件流中抽出後，仍然在文件流中的其他元素將忽略該元素並填補他原先的空間。

基於文件流， 我們可以很容易理解以下的定位模式：相對定位（relative）， 即相對於元素在文件流中位置進行偏移，但保留原佔位。絕對定位（absolute）， 即完全脫離文件流， 相對於position屬性非static值的最近父級元素進行偏移。固定定位（fixed）， 即完全脫離文件流， 相對於視區進行偏移。

referrence：