[CSS] 關於區塊 display

Photo by Christian Stahl on Unsplash

在CSS排版方面，將每個元素分區塊是非～常～重～要的一件事！接下來要介紹的就是幾乎是100%會用到的display。

display: block

通常為預設值，這個block的區塊元素，就是將整個盒模型範圍撐好撐滿一整個寬～即使設定 width 在畫面呈現上會是 width 的樣式，但打開dev tool還是會發現它的區塊是撐滿整個父層的。

當我們新增一個新的區塊時，這個區塊的排列會自動往下一欄做排列！

display: inline-block

行內區塊元素，盒模型的範圍會是所設定的寬或是內容寬。 當裡面的區塊超過父層時，會自動往下一格排版。

display: inline

無法設定寬高，也沒辦法設定垂直的屬性，預設為inline 的元素標籤常見的有： <a> , <span> , <img>….。

display: none

將這個區塊從畫面上消失。