CSS樣式屬性十分豐富多樣,其中最基礎(chǔ)也是最重要的屬性是display屬性。
display屬性用來(lái)控制元素的顯示方式,具體的使用方法如下:
selector{ display:value; }
其中,selector代表需要設(shè)置樣式的元素,value是需要設(shè)置的display值。下面列舉了常見(jiàn)幾種value值的含義:
block: 塊級(jí)元素。此屬性值讓元素生成一個(gè)塊級(jí)元素,并占據(jù)父容器的整個(gè)寬度。塊級(jí)元素會(huì)默認(rèn)換行,因此適用于需要獨(dú)占一行的元素(例如標(biāo)題、段落等)。
inline: 行內(nèi)元素。此屬性值讓元素都在一行上排列,并根據(jù)內(nèi)容的長(zhǎng)度自適應(yīng)寬度。行內(nèi)元素不會(huì)獨(dú)占一行,因此適用于嵌套在文本中的元素(例如超鏈接、強(qiáng)調(diào)等)。
inline-block: 行內(nèi)塊級(jí)元素。此屬性值將元素生成一個(gè)塊級(jí)元素,但是會(huì)將元素放置在同一行上,并根據(jù)內(nèi)容的長(zhǎng)度自適應(yīng)寬度。適用于需要獨(dú)占一行,但是又需要與其他行內(nèi)元素排列在一行的元素。
none: 隱藏元素。此屬性值將元素隱藏,并不占用頁(yè)面空間。
通過(guò)display屬性,不僅可以控制元素的顯示方式,還可以控制元素在布局中的占用情況,對(duì)于頁(yè)面布局非常重要。