display的取值有block、inline、none、inline-block、flex、grid、table、inline-table和list-item等。詳細介紹:1、block,將元素渲染為塊級元素,塊級元素在頁面上形成一個塊,并且獨占一行;2、inline,將元素渲染為內(nèi)聯(lián)元素。內(nèi)聯(lián)元素不會獨占一行,可以與其他元素并排;3、none,此值指定元素不會在頁面上等等。
本教程操作系統(tǒng):windows10系統(tǒng)、DELL G3電腦。
在CSS中,display
屬性用于確定元素的顯示類型。它可以有多種不同的值,以下是一些主要的display
屬性值:
1、block:將元素渲染為塊級元素。塊級元素在頁面上形成一個塊,并且獨占一行。例如,<div>
、<p>
、<h1>
–<h6>
以及<li>
等都是默認的塊級元素。
2、inline:將元素渲染為內(nèi)聯(lián)元素。內(nèi)聯(lián)元素不會獨占一行,可以與其他元素并排。例如,<span>
、<a>
等都是默認的內(nèi)聯(lián)元素。
3、none:此值指定元素不會在頁面上顯示。它與visibility: hidden
不同,因為使用visibility: hidden
的元素仍然會占據(jù)頁面空間,而使用display: none
的元素則完全從布局中移除。
4、inline-block:將元素渲染為內(nèi)聯(lián)塊級元素。內(nèi)聯(lián)塊級元素的特點是它們像內(nèi)聯(lián)元素一樣并排,但可以設置寬度和高度,像塊級元素一樣有自己的尺寸。
5、flex:將元素渲染為彈性盒模型。彈性盒模型是一種用于在一維空間(行或列)內(nèi)布局、對齊和分布空間的CSS布局技術。
6、grid:將元素渲染為網(wǎng)格容器。網(wǎng)格容器可以在二維空間(行和列)內(nèi)布局、對齊和分布空間。
7、table:將元素渲染為表格。這種值主要用于顯示表格數(shù)據(jù),但現(xiàn)在已經(jīng)不常用,因為現(xiàn)代的CSS技術提供了更靈活的布局方法。
8、inline-table:將元素渲染為內(nèi)聯(lián)表格。內(nèi)聯(lián)表格類似于內(nèi)聯(lián)塊級元素,但具有表格的特性,例如單元格之間的邊距和填充。
9、list-item:將元素渲染為列表項。使用此值時,元素會顯示為列表中的一個項目,并帶有默認的項目符號或編號。
除了以上這些主要的display
屬性值,還有一些其他的取值,如?run-in
、compact
、marker
等,但在現(xiàn)代的Web開發(fā)中,這些值的使用并不常見。大多數(shù)情況下,使用上述的幾個主要值就可以滿足大部分的布局需求。