层叠样式表 (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 界面，无缝适应各种屏幕尺寸和设备。
相关文章
