這次要細(xì)說的只是塊級元素和行內(nèi)元素的內(nèi)容，如有不對钞诡，請輕噴潜索。
塊級元素和行內(nèi)元素
默認(rèn)情況下塊級元素會(huì)始終占居一行竹习，而行內(nèi)元素并不會(huì)。除了 table 元素的 display 屬性比較特殊以外拗窃，基本上所有的 HTML 元素的 display 的屬性值要么是 block，要么是 inline九默。無論你想了解哪個(gè) HTML 元素驼修，第一個(gè)要問的問題就是：它是塊級元素還是行內(nèi)元素诈铛，然后在編寫標(biāo)記的時(shí)候預(yù)想到這個(gè)元素在初始狀態(tài)下是如何定位的幢竹，這樣才能進(jìn)一步想好將來怎么用 CSS 重新定位它，因?yàn)閴K級元素和行內(nèi)元素在定位上有很大的區(qū)別蹲坷，后面會(huì)詳細(xì)說明循签。
塊級元素盒子（一個(gè)很重要的概念————盒模型）會(huì)擴(kuò)展到與父元素同寬幸乒，這也是為什么塊級元素會(huì)占居一行的原因了罕扎，因?yàn)樗袎K級元素的父元素都是 body，而它的默認(rèn)寬度就是瀏覽器的視口大小杆查，所以默認(rèn)情況下塊級元素的寬度也和瀏覽器的視口一樣寬臀蛛，這樣以來浊仆，一個(gè)塊級元素旁邊也就沒有空間來容納另一個(gè)塊級元素了。
相比于塊級元素會(huì)擴(kuò)展到與父元素同寬舔琅，然而行內(nèi)元素的行為卻是恰恰相反备蚓，它會(huì)盡量的收縮包裹其內(nèi)容，這也就是為什么幾個(gè)行內(nèi)元素會(huì)并排顯示在一行直到它們排滿一行才會(huì)另起一行二跋，而每個(gè)塊級元素會(huì)直接另起一行的原因了流昏。
下表列出了一些常見的塊級元素和行內(nèi)元素：
| 塊級元素 | 行內(nèi)元素 |
|---|---|
| div | span |
| form | a |
| table | img |
| header | label |
| aside | input |
| section | select |
| article | textarea |
| figure | br |
| figcaption | i |
| h1~h6 | em |
| nav | strong |
| p | small |
| pre | button |
| blockqoute | sub |
| canvas | sup |
| ol, ul, dl | code |
之前提到過無論你想了解哪個(gè) HTML 元素，第一個(gè)要問的問題就是：它是塊級元素還是行內(nèi)元素横缔，因?yàn)樗鼈冊诤心Ｐ蜕系谋憩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)該顯示單選按鈕還是多選按鈕亦或是文本輸入框腥光。而對于非替換元素，比如 p糊秆、label 元素等等武福，瀏覽器這是直接顯示元素所包含的內(nèi)容《环看到這里你應(yīng)該大概的知道了什么是替換元素和非替換元素了捉片。
對著兩個(gè)概念有了大概的了解后就可以對 block 和 inline 在盒模型上的表現(xiàn)差異進(jìn)行了解了，首先是 margin 汞舱，W3C 對其所支持了元素對象是這么定義的：
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 的元素也支持莹规，可能是我對原文標(biāo)準(zhǔn)的理解有誤。但還有一個(gè)要特別注意的是 margin-top 和 margin-bottom 兩個(gè)屬性比較特殊说铃，它們對非替換行內(nèi)元素沒有效果访惜，下面是 W3C 上對于 margin-top 和margin-bottom 支持對象的介紹：
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.
前面一句和之前對 margin 的描述是一樣的嘹履，這毫無疑問，下面這句話的意思是這些（ margin-top 和 margin-bottom ）屬性對非替換行內(nèi)元素沒有效果比如 a 和span债热，注意這里是非替換行內(nèi)元素而不單單是非替換元素或者是行內(nèi)元素砾嫉。比如 img 就是一個(gè)行內(nèi)元素， margin-top 和 margin-bottom 對它是有效果的窒篱，因?yàn)樗且粋€(gè)替換元素而不是非替換元素焕刮，所以對于「 margin-top 和 margin-bottom 對行內(nèi)元素沒有效果」這種說法是不對的。
而對于 padding 的支持對象墙杯，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 的元素不支持溉旋，其他所有的元素都支持。
但這里有些特殊情況需要注意的是嫉髓，對行內(nèi)元素比如 span 和 img 設(shè)置左右內(nèi)邊距的效果是可見可观腊，但是對行內(nèi)元素設(shè)置上下內(nèi)邊距在有些情況下是不可見的，這些情況又要分為是否為替換元素和是否設(shè)置了背景色算行，為了能更直觀的了解這些概念梧油，我在這里做了個(gè)表格：
| padding-top和padding-bottom 對于行內(nèi)元素是否可見 | 替換元素（e.g: input） | 非替換元素（e.g: span） |
|---|---|---|
|
設(shè)置背景色 |
可見 影響行高 會(huì)撐開父元素 |
可見 不影響行高 不會(huì)撐開父元素 |
|
沒有設(shè)置背景色 |
可見 影響行高 會(huì)撐開父元素 |
不可見 不影響行高 不會(huì)撐開父元素 |
所以對于「 padding-top 和 padding-bottom 對行內(nèi)元素沒有效果」這種說法也是不對的，因?yàn)樗鼈冎皇菍τ跊]有設(shè)置背景色的行內(nèi)非替換元素效果不可見而已州邢，而對于行內(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 后信轿，既可以用只對行內(nèi)元素有效的 text-align: center; 聲明對其進(jìn)行居中以外，還可以用 padding-top 和 padding-bottom 對元素設(shè)置上下內(nèi)邊距而無需對其設(shè)置背景色残吩，并且能把父元素?fù)伍_财忽。
不要問我為何知道這么多，我只獻(xiàn)上傳送門
