CSS 重要的屬性 – Display 介紹，你還在只會display:none嗎

display屬性到底是什麼?

display，中文翻譯就是「顯示」，而在CSS當中，它就是控制元素如何顯示的一個重要屬性。

講的專業些，就是控制指定元素框該如何去進行渲染，而這就會大大影響到整個布局。

有哪些display屬性

常見的display有這幾種

• none : 相信大家跟它最熟，就是不顯示呢
• block : 將元素渲染為塊狀元素，佔據整個父元素的寬度，下一個布局會從下一行開始
• inline : 行內元素，顧名思義，就是會在同一行裡面，只佔據元素內容所需的寬度
• inline-block : 行內塊狀元素，元素在同一行內且可以設定寬度和高度

底下直接上範例，用說的還是沒有感覺

See the Pen Untitled by story zyra (@story-zyra) on CodePen.

( 為了節省網頁一進來的負擔，請大家自己按下【RUN PEN】吧… )

⬆️特別用了框線，這樣就能清楚的看到三者的差異了

可以看到 inline 是不受到寬度高度設定所影響的，元素佔據多大，它就如實呈現

至於 inline-block，就是結合了block可以設定寬高的特定，又可以在同一行裡面呈現

⭐Div元素預設的display就是block 喔，所以才會有換行的效果

結論

相信不只一個小夥伴跟以前的筆者一樣，只會none

其他就一個一個試…看哪個符合

希望這篇文章可以對以後的排版節省一點點時間

🧡幫我點一個小小的廣告或留言，都是對我的支持(每天都只有詐騙跟色情留言…)

✅如有任何疑問，歡迎透過留言或messenger讓我知道 !

一些隨機的筆記