您必须了解的10个最常用CSS显示值

软文推广2周前更新 刘老三
10 0

层叠样式表 (CSS) 是 Web 开发的一项基础技术,允许开发人员控制 HTML 文档的布局和表示。 CSS 中最重要的属性之一是display属性,它决定元素在浏览器中的呈现方式。了解各种display属性值对于创建结构良好且响应灵敏的 Web 布局至关重要。以下是display您必须了解的10 个最常用的 CSS值:

1.block:该值是大多数 HTML 元素的block默认值。display元素display: block;占据其父容器的整个宽度并垂直堆叠在彼此的顶部。块级元素的示例包括div、p和h1。

例子:

.block-element {
display: block;
}
<div class=”block-element”>
This is a block-level element.
</div>

2.inline:元素display: inline;只占用必要的空间,并且不另起一行。它们在其父容器内水平流动,并且可以放置在其他内联元素旁边。内联元素的示例包括span、a和strong。

例子:

.inline-element {
display: inline;
}
<span class=”inline-element”>This is an inline element.</span>

3.inline-block:该值结合了显示类型和显示类型inline-block的各个方面。元素被渲染为块级框,但像内联元素一样流动,允许它们水平相邻放置,同时保留其块状属性。blockinlinedisplay: inline-block;

例子:

.inline-block-element {
display: inline-block;
}
<div class=”inline-block-element”>This is an inline-block element.</div>

4.:该值引入了灵活的盒子布局模型,允许开发人员轻松创建复杂且响应式的布局。元素成为弹性容器,其子元素成为弹性项目。该属性为构建动态布局提供了强大的对齐和间距功能。flexflexdisplay: flex;flex

例子:

.flex-container {
display: flex;
justify-content: space-between;
}
.flex-item {
flex: 1;
}
<div class=”flex-container”>
<div class=”flex-item”>Item 1</div>
<div class=”flex-item”>Item 2</div>
<div class=”flex-item”>Item 3</div>
</div>

5.grid:与 类似flex,该grid值引入了二维网格布局系统。元素display: grid;成为网格容器,它们的子元素成为网格项。该grid属性可以精确控制网格内元素的放置和对齐方式,从而促进复杂且响应式设计的创建。

例子:

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.grid-item {
background-color: #f0f0f0;
padding: 10px;
text-align: center;
}
<div class=”grid-container”>
<div class=”grid-item”>Item 1</div>
<div class=”grid-item”>Item 2</div>
<div class=”grid-item”>Item 3</div>
</div>

6.:该值使用 CSS 模拟 HTML 表格元素( 、、等)的行为。元素的行为类似于表格元素,允许开发人员创建类似表格的结构,而无需使用实际的表格标记。这对于设置数据样式或使用表格结构创建布局非常有用。tabletable丶table丶tr丶td丶display: table;

例子:

.table-element {
display: table;
}
<div class=”table-element”>
<div style=”display: table-row;”>
<div style=”display: table-cell;”>Cell 1</div>
<div style=”display: table-cell;”>Cell 2</div>
<div style=”display: table-cell;”>Cell 3</div>
</div>
</div>

7.:该值与显示类型结合使用。元素的行为类似于表格单元格,允许它们在类似表格的结构中垂直对齐。此显示值通常用于在类似表格的布局中创建垂直对齐。table-celltable-celltabledisplay: table-cell;

例子:

.table-cell-element {
display: table-cell;
vertical-align: middle;
}
<div class=”table-cell-element”>This is a table cell.</div>

8.none:该none值将元素从页面布局中完全隐藏。元素将从display: none;文档流中删除,并且不占用页面上的任何空间。这通常用于根据用户交互或应用程序逻辑动态或有条件地隐藏元素。

例子:

.hidden-element {
display: none;
}
<div class=”hidden-element”>This element is hidden.</div>

9.:与 类似,该值结合了和显示类型的各个方面。元素呈现为 Flex 容器,但像内联元素一样流动,允许它们水平相邻放置,同时仍然受益于 Flex 布局模型。inline-flexinline-blockinline-flexflexinlinedisplay: inline-flex;

例子:

.inline-flex-container {
display: inline-flex;
}
<div class=”inline-flex-container”>
<div style=”flex: 1;”>Item 1</div>
<div style=”flex: 1;”>Item 2</div>
<div style=”flex: 1;”>Item 3</div>
</div>

10.inline-grid:该值结合了显示类型和显示类型inline-grid的各个方面。元素被渲染为网格容器,但像内联元素一样流动,允许它们水平相邻放置,同时仍然受益于网格布局模型。gridinlinedisplay: inline-grid;

例子:

.inline-grid-container {
display: inline-grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
<div class=”inline-grid-container”>
<div class=”grid-item”>Item 1</div>
<div class=”grid-item”>Item 2</div>
<div class=”grid-item”>Item 3</div>
</div>

了解这些 CSSdisplay属性值使开发人员能够创建多样化和响应式的 Web 布局,以满足不同的设计要求和用户体验。通过利用适当的display值,开发人员可以制作具有视觉吸引力和功能性的 Web 界面,无缝适应各种屏幕尺寸和设备。

© 版权声明

相关文章