inline
span
是一個標準的行內元素。一個行內元素可以在段落中 <span> 像這樣 </span> 包裹一些文字片段,透過 CSS 點綴其樣式,且不會打亂段落原本的版面配置。 a
元素是最常見的行內元素,它可以被用作超連結之用。
none
另一個常用的 display 值是 none
。有一些特殊的元素 display 預設值會套用 none
屬性值,例如 script
元素就是個典型的例子。display:none
通常會搭配 JavaScript 一起使用,我們可以透過 JavaScript 動態修改元素的 display 屬性,用以隱藏或顯示該元素,而不是將元素從頁面中刪除或重建。
display
和 visibility
屬性不一樣,把 display
設定成 none
不會保留元素原本該顯示的空間,但是 visibility: hidden;
會讓元素的內容看不見,但會保留原本內容應該顯示的空間,只是看不到內容而已。
其他 display 值
還有很多其他的 display 值,例如 list-item
和 table
等等,這裡有一份詳細的列表,你可以連進去查看完整的屬性值清單。稍後我們會探討 inline-block
和 flex
這兩個屬性。
補充說明
就像我之前說過的,每個元素都有一個預設的 display 屬性,不過你可以隨時隨地地覆蓋這個屬性值。雖然我們把 div 修改成一個「行內元素」好像還蠻怪的,不過實務上來說我們會把某些元素修改掉預設的 display 屬性,好讓它可以呈現有特定語義的元素。其中比較常見的例子就是把 li
元素修改成 inline,以便我們將該元素正確地呈現在水平的選單上。