css 内聯元素、塊級元素、内聯塊級元素

對于display我想很多人都不陌生，然而在談到内聯元素，行内元素等詞，還是會有人腦袋瓜子充滿了疑問？？？我曾經自以為已經了解并懂得如何使用display，在學習vertical-align及替換元素等的時候，才深刻明白自己也就一知半解，接下來不說display各種參數的使用方法，而是談談display形成的各種盒模型

display

指定了元素的顯示類型，包含兩種用于指定元素怎樣生成盒模型 => 決定了布局的方式，直接影響height

1. 外部顯示類型：

   display:block

   |

   display:inline

2. 内部顯示類型：

   display:flow

   |

   display:table

   |

   display:flex

3. 外部div的高度，由其内部的文檔流元素的高度總和決定，并不是相等

我的個人的看法是外部顯示類型主要是指在整個文檔流當中此div的狀态，而内部顯示類型就是此div裡面的内容布局，（例如現在經常使用的flex，就是此div内部的各個元素根據flexbox模型展示）

文檔流

1. 如果是内聯元素，文檔流流動方向從左到右布局，寬度不夠，換行繼續流
2. 如果是塊級元素，文檔流流動方向從上到下布局，一個block占據一行，依次向下布局，即使一個塊寬度不足以達到總寬度

内聯元素inline

1. 也叫行内元素，一個行内元素隻占據它對應标簽的邊框所包含的空間
2. 常見行内元素：

   <a></a> | <abbr></abbr> | <em></em> | <strong></strong> | <span></span> | <img> | <script></script> | <label></label>

3. 特點：

• 元素從左到右流動布局
• 元素的height、width、margin-top、margin-bottom不可設定
• 元素的高度就是它自身的建議行高 =>content-area的高度
• 注意點：内聯元素設定行高會有位置的變化，但沒有改變盒子大小（在為内聯元素設定背景時，預設高度的地方有背景），inline-box行内框高度=content area内容的高度,特殊内聯元素除外！！！

1. 内聯元素轉塊級元素：display:block

塊級元素block

1. 塊級元素占據其父元素容器的整個空間
2. 常見塊級元素：

   <div></div> | <address></address> | <article></article> | <audio></audio> | <canvas></canvas> | <dd></dd> | <dl></dl> | <footer></footer> | <form></form> | <hr> | <header></header> |<h1>-<h6> | <ol></ol> | <p></p> | <section></section> | <table></table> | <ul></ul> | <video></video>

3. 特點：

• 每個塊級元素都從新的一行開始
• 元素的height、width、line-height、margin-top、margin-bottom都可以設定
• 元素width在不設定的情況下，是它本身父容器的100%（除非設定一個寬度）

1. 塊級元素轉内聯元素：display:inline

内聯塊級元素inline-block =>特殊的内聯元素

1. 替換元素，如 img / input / svg 等
2. inline-block 元素，以及所有 display 值以 inline- 開頭的元素，如 inline-table / inline-flex
3. 處于某種特殊格式化上下文的内聯元素，例如 flexbox 元素中的子元素都處于 flex formatting context（彈性格式化上下文）中
4. 特點：

• 元素的height、width、line-height、margin-bottom、margin-top都可以設定
• 行框line-box和content-area的高度可被改變

對于内聯塊級元素，我在看很多材料的時候，都發現很多人将其歸類于内聯元素或者行内元素中，則讓我一度産生了很深的疑惑，為什麼内聯元素一會兒可以改變line-height一會兒不可以的，如果将其說成是内聯塊級元素，我相信很多初學者就會恍然大悟了，特别是針對替換元素，就不至于一臉懵逼兩臉懵圈了～