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