[CSS] 關於區塊 display
Published in
Jul 28, 2021
在CSS排版方面,將每個元素分區塊是非~常~重~要的一件事!接下來要介紹的就是幾乎是100%會用到的display。
display: block
通常為預設值,這個block的區塊元素,就是將整個盒模型範圍撐好撐滿一整個寬~即使設定 width 在畫面呈現上會是 width 的樣式,但打開dev tool還是會發現它的區塊是撐滿整個父層的。
當我們新增一個新的區塊時,這個區塊的排列會自動往下一欄做排列!
display: inline-block
行內區塊元素,盒模型的範圍會是所設定的寬或是內容寬。 當裡面的區塊超過父層時,會自動往下一格排版。
display: inline
無法設定寬高,也沒辦法設定垂直的屬性,預設為inline 的元素標籤常見的有: <a> , <span> , <img>….。
display: none
將這個區塊從畫面上消失。