這次要細(xì)說的只是塊級(jí)元素和行內(nèi)元素的內(nèi)容，如有不對(duì)，請(qǐng)輕噴。

塊級(jí)元素和行內(nèi)元素

默認(rèn)情況下塊級(jí)元素會(huì)始終占居一行，而行內(nèi)元素并不會(huì)。除了 table 元素的 display 屬性比較特殊以外，基本上所有的 HTML 元素的 display 的屬性值要么是 block，要么是 inline。無論你想了解哪個(gè) HTML 元素，第一個(gè)要問的問題就是：它是塊級(jí)元素還是行內(nèi)元素，然后在編寫標(biāo)記的時(shí)候預(yù)想到這個(gè)元素在初始狀態(tài)下是如何定位的，這樣才能進(jìn)一步想好將來怎么用 CSS 重新定位它，因?yàn)閴K級(jí)元素和行內(nèi)元素在定位上有很大的區(qū)別，后面會(huì)詳細(xì)說明。

塊級(jí)元素盒子（一個(gè)很重要的概念————盒模型）會(huì)擴(kuò)展到與父元素同寬，這也是為什么塊級(jí)元素會(huì)占居一行的原因了，因?yàn)樗袎K級(jí)元素的父元素都是 body，而它的默認(rèn)寬度就是瀏覽器的視口大小，所以默認(rèn)情況下塊級(jí)元素的寬度也和瀏覽器的視口一樣寬，這樣以來，一個(gè)塊級(jí)元素旁邊也就沒有空間來容納另一個(gè)塊級(jí)元素了。

相比于塊級(jí)元素會(huì)擴(kuò)展到與父元素同寬，然而行內(nèi)元素的行為卻是恰恰相反，它會(huì)盡量的收縮包裹其內(nèi)容，這也就是為什么幾個(gè)行內(nèi)元素會(huì)并排顯示在一行直到它們排滿一行才會(huì)另起一行，而每個(gè)塊級(jí)元素會(huì)直接另起一行的原因了。

下表列出了一些常見的塊級(jí)元素和行內(nèi)元素：

之前提到過無論你想了解哪個(gè) HTML 元素，第一個(gè)要問的問題就是：它是塊級(jí)元素還是行內(nèi)元素，因?yàn)樗鼈冊(cè)诤心Ｐ蜕系谋憩F(xiàn)有很大的不同，不過在了解它們的不同之前我們還得先知道另外一個(gè)概念————替換元素和非替換元素，其中替換元素就是指瀏覽器是根據(jù)元素的屬性來判斷具體要顯示的內(nèi)容的元素，比如 img 標(biāo)簽，瀏覽器是根據(jù)其 src 的屬性值來讀取這個(gè)元素所包含的內(nèi)容的，常見的替換元素還有 input 、textarea、 select、 object、 iframe 和 video 等等，這些元素都有一個(gè)共同的特點(diǎn)，就是瀏覽器并不直接顯示其內(nèi)容，而是通過其某個(gè)屬性的值來顯示具體的內(nèi)容，比如瀏覽器會(huì)根據(jù) input 中的 type 的屬性值來判斷到底應(yīng)該顯示單選按鈕還是多選按鈕亦或是文本輸入框。而對(duì)于非替換元素，比如 p、label 元素等等，瀏覽器這是直接顯示元素所包含的內(nèi)容?？吹竭@里你應(yīng)該大概的知道了什么是替換元素和非替換元素了。

對(duì)著兩個(gè)概念有了大概的了解后就可以對(duì) block 和 inline 在盒模型上的表現(xiàn)差異進(jìn)行了解了，首先是 margin ，W3C 對(duì)其所支持了元素對(duì)象是這么定義的：

Applies to: all elements except elements with table display types other than table-caption, table and inline-table

我的理解就是所有元素都支持 margin 除了 display 屬性值為 table-caption 和 table-inline 以外的所有表格顯示類型比如table-row-group、 table-cell、 table-row 和 table-header-group等等,但是為了驗(yàn)證我的理解，我發(fā)現(xiàn) display 屬性值為 table 的元素也支持，可能是我對(duì)原文標(biāo)準(zhǔn)的理解有誤。但還有一個(gè)要特別注意的是 margin-top 和 margin-bottom 兩個(gè)屬性比較特殊，它們對(duì)非替換行內(nèi)元素沒有效果，下面是 W3C 上對(duì)于 margin-top 和margin-bottom 支持對(duì)象的介紹：

Applies to: all elements except elements with table display types other than table-caption, table and inline-table
These properties have no effect on non-replaced inline elements.

前面一句和之前對(duì) margin 的描述是一樣的，這毫無疑問，下面這句話的意思是這些（ margin-top 和 margin-bottom ）屬性對(duì)非替換行內(nèi)元素沒有效果比如 a 和span，注意這里是非替換行內(nèi)元素而不單單是非替換元素或者是行內(nèi)元素。比如 img 就是一個(gè)行內(nèi)元素， margin-top 和 margin-bottom 對(duì)它是有效果的，因?yàn)樗且粋€(gè)替換元素而不是非替換元素，所以對(duì)于「 margin-top 和 margin-bottom 對(duì)行內(nèi)元素沒有效果」這種說法是不對(duì)的。

而對(duì)于 padding 的支持對(duì)象，W3C 是這么描述的：

all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column

上面這句話的意思是除了表格顯示類型為 table-row-group、 table-header-group、 table-footer-group、 table-row,table-column-group 和 table-column 的元素不支持，其他所有的元素都支持。

但這里有些特殊情況需要注意的是，對(duì)行內(nèi)元素比如 span 和 img 設(shè)置左右內(nèi)邊距的效果是可見可，但是對(duì)行內(nèi)元素設(shè)置上下內(nèi)邊距在有些情況下是不可見的，這些情況又要分為是否為替換元素和是否設(shè)置了背景色，為了能更直觀的了解這些概念，我在這里做了個(gè)表格：

所以對(duì)于「 padding-top 和 padding-bottom 對(duì)行內(nèi)元素沒有效果」這種說法也是不對(duì)的，因?yàn)樗鼈冎皇菍?duì)于沒有設(shè)置背景色的行內(nèi)非替換元素效果不可見而已，而對(duì)于行內(nèi)替換元素來說，不管是否設(shè)置了背景色都是有效果了，并且會(huì)把父元素?fù)伍_。

說了這么多 block 和 inline 的區(qū)別，其實(shí)除了這兩個(gè)常見的 display 屬性以外還有一個(gè)屬性也是非常常見的，那就是 inline-block ，沒錯(cuò)，這就是前面兩種情況的結(jié)合體，它既有 block 的特性又有 inline 的特性，比如把一個(gè) display 屬性值為 block 或者 inline 的元素屬性值設(shè)置成 inline-block 后，既可以用只對(duì)行內(nèi)元素有效的 text-align: center; 聲明對(duì)其進(jìn)行居中以外，還可以用 padding-top 和 padding-bottom 對(duì)元素設(shè)置上下內(nèi)邊距而無需對(duì)其設(shè)置背景色，并且能把父元素?fù)伍_。

不要問我為何知道這么多，我只獻(xiàn)上傳送門