CSS 屬性中,display(或顯示屬性)是非常重要的一個屬性。它用來定義一個元素的布局類型,比如 inline(行內)、block(塊狀) 或者 inline-block(行內塊狀) 等,從而讓我們可以更好地排版和布局網頁內容。
display 屬性的取值有很多,下面來逐個介紹。
display: none;
none 表示該元素不顯示,也不占據空間,相當于該元素已經從 DOM 中移除。
display: block;
塊狀元素,比如 div、h1 等都是 block,它們會獨占一行,不會和其他元素同行排列,可以設置寬度和高度。
display: inline;
行內元素,比如 span、a 等都是 inline,它們跟文本一樣,不會獨占一行,可以與其他元素在一行內排列,寬度和高度不能被設置,只能根據內容自動調整。
display: inline-block;
行內塊狀元素,它們可以像行內元素一樣與其他元素在一行內排列,同時又可以像塊狀元素一樣設置寬度和高度等屬性。
display: table;
將元素顯示為表格,可以將其作為 table, table-row, table-column 等標簽的替代使用。
除了以上幾個常用的取值外,display 還有很多其他取值,比如 list-item(用于 li 元素)、table-cell(用于 td 和 th 元素)等,可以根據實際需要選擇使用。