在css盒子模型中，我們提到了html元素中的塊元素（block element）和內(nèi)聯(lián)元素（inline element）。那么它們究竟是什么呢？

其實(shí)，這兩種元素都是html規(guī)范中的概念。塊元素(block element)一般是其他元素的容器元素，能容納其他塊元素或內(nèi)聯(lián)元素。最常見的就是P和div這兩個(gè)，說的簡單點(diǎn)，塊元素就好比一個(gè)四方塊，可以放其他的四方塊，并可以呈現(xiàn)在頁面上任何地方。默認(rèn)情況下塊元素，是獨(dú)占一行的。常見的塊元素：div、h1-h6標(biāo)題、form（只能用來容納其他塊元素）、hr、p、table、ul、ol等。內(nèi)聯(lián)元素(inline element)也叫內(nèi)嵌元素或行內(nèi)元素，一般都是基于語義級(jí)(semantic)的基本元素。內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素，常見內(nèi)聯(lián)元素有a和span。

塊元素與內(nèi)聯(lián)元素的區(qū)別？

1.塊元素，總是在新行上開始；內(nèi)聯(lián)元素，和其他元素都在一行上。

2.塊元素，能容納其他塊元素或內(nèi)聯(lián)元素；內(nèi)聯(lián)元素，只能容納文本或者其他內(nèi)聯(lián)元素。

3.塊元素中高度，行高以及頂和底邊距都可控制；內(nèi)聯(lián)元素中高，行高及頂和底邊距不可改變。

(這上面的區(qū)別，指的是默認(rèn)情況下的，不包括CSS的刻意控制。也就是說當(dāng)使用css控制時(shí)，塊元素和內(nèi)聯(lián)元素的屬性差異會(huì)越來越小。)

block（塊）元素的特點(diǎn)：

①總是在新行上開始；
②高度，行高以及外邊距和內(nèi)邊距都可控制；
③寬度缺省是它的容器的100%，除非設(shè)定一個(gè)寬度。
④它可以容納內(nèi)聯(lián)元素和其他塊元素

inline元素的特點(diǎn)：

①和其他元素都在一行上；
②高，行高及外邊距和內(nèi)邊距不可改變；
③寬度就是它的文字或圖片的寬度，不可改變
④內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素

CSS文檔流與塊級(jí)元素（block）、內(nèi)聯(lián)元素（inline），之前翻閱不少書籍，看過不少文章， 看到所多的是零碎的CSS布局基本知識(shí)，比較表面。看過O'Reilly的《CSS權(quán)威指南》，發(fā)現(xiàn)里面提到的文檔流概念讓我很敏感。 可惡的是書中并沒有解釋文檔流是什么東西，或許作者覺得這個(gè)太簡單了以至于不值一提。但我覺得，這個(gè)概念實(shí)在太重要了。理解了它，一堆CSS布局的理論都變得易于理解，并且體會(huì)到CSS這套設(shè)計(jì)的合理性所在。

文檔流

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

每個(gè)非浮動(dòng)塊級(jí)元素都獨(dú)占一行， 浮動(dòng)元素則按規(guī)定浮在行的一端。 若當(dāng)前行容不下， 則另起新行再浮動(dòng)。

內(nèi)聯(lián)元素也不會(huì)獨(dú)占一行。 幾乎所有元素(包括塊級(jí)，內(nèi)聯(lián)和列表元素）均可生成子行， 用于擺放子元素。

有三種情況將使得元素脫離文檔流而存在，分別是浮動(dòng)，絕對(duì)定位， 固定定位。 但是在IE中浮動(dòng)元素也存在于文檔流中（還讓我覺得這樣很合理><）。