元素的顯示方式由 CSS display 屬性控制
如果 display 屬性的值爲 block，那麼該元素被稱爲 塊級元素，它們表現出來的特點如下：
-
獨佔一行，前後都有換行符
-
width 和 height 都能生效
如果沒有設置寬高，那麼寬度默認佔滿父級元素寬度，高度由內容撐開
-
margin 和 padding 都能生效
如果 display 屬性的值爲 inline，那麼該元素被稱爲 行內元素，它們表現出來的特點如下：
- 不會獨佔一行，前後沒有換行符
- width 和 height 都會失效，元素的寬高都由內容撐開
- margin 和 padding 在水平方向上可以生效，但是在垂直方向上都會失效
如果 display 屬性的值爲 inline-block，那麼該元素被稱爲 行內塊級元素，它們表現出來的特點如下：
- 不會獨佔一行，前後沒有換行符
- width 和 height 都能生效
- margin 和 padding 都能生效
此外，display 屬性還能設置爲其它值，這裏也不一一進行列舉
若未設置 display 屬性的值，那麼會根據元素的類型給 display 屬性設置一個默認值，一般是 block 或 inline
講到這裏，關於元素顯示方式，其實我們就差不多講完了，直至我們遇到一道面試題，題目如下：
爲什麼 <img>、<input> 等行內元素可以設置寬高？
嗯？剛剛不是說行內元素的 width 和 height 屬性都會失效嗎，但是爲什麼還能設置寬高呀
解決這個問題，我們還需要知道一個知識點，可替換元素和不可替換元素
不可替換元素 是指那些 元素的展示內容就是標籤之間的文本 的元素，例如：
- <p>：
<p>元素的展示內容</p> - <span>：
<span>元素的展示內容</span>
可替換元素 是指那些 根據元素的屬性決定元素的展示內容 的元素，例如：
-
<img>：根據
src屬性，決定圖片的實際內容 -
<input>：根據
type屬性，決定表單的實際類型
不難發現，可替換元素大多是空元素，正因爲元素裏面沒有內容，所以才需要通過屬性決定展示的內容
可替換元素有內置寬高，它們的顯示方式和 inline-block 元素一致，因此可以設置 width 和 height
【 閱讀更多 CSS 系列文章，請看 CSS學習筆記 】