CSS display
CSS（层叠样式表）中的 display 属性是一个非常重要的属性，它决定了元素应该如何显示在页面上。通过调整 display 属性，你可以控制元素的布局、排列和可见性。以下是 display 属性的详细介绍和一些常用值的示例。
1. 基本概念
display 属性有多种取值，每个取值都会改变元素的显示方式。常见的取值包括：
block
inline
inline-block
none
flex
grid
table 系列（如 table, table-row, table-cell）
2. 常用取值详解
2.1 block
默认情况下，大多数 HTML 元素（如 <div>, <p>, <h1> 等）的 display 属性值为 block。block 元素会独占一行，宽度默认为其父容器的 100%，并且可以设置宽度、高度、内边距和边框。
.block-element {
display: block;
width: 50%;
background-color: lightblue;
}
2.2 inline
inline 元素不会独占一行，它们只占据其内容的宽度，并且不能设置宽度和高度（尽管可以设置内边距和边框，但这些设置只会影响左右两边，不会影响上下）。常见的 inline 元素有 <span>, <a>, <em> 等。
.inline-element {
display: inline;
background-color: lightgreen;
padding: 5px;
}
2.3 inline-block
inline-block 元素结合了 inline 和 block 的特点。它们像 inline 元素一样不会独占一行，但可以像 block 元素一样设置宽度和高度。
.inline-block-element {
display: inline-block;
width: 100px;
height: 50px;
background-color: lightcoral;
}
2.4 none
将 display 属性设置为 none 会使元素完全不可见，并且不会占据页面上的任何空间。它相当于从 DOM 树中移除了该元素。
.hidden-element {
display: none;
}
2.5 flex
flex 布局是一种一维布局方法，允许容器内的元素在主轴（默认水平方向）上灵活排列和缩放。使用 display: flex; 可以将容器设置为弹性盒子容器。
.flex-container {
display: flex;
justify-content: space-between; /* 子元素之间的间隔 */
}
.flex-item {
background-color: lightyellow;
padding: 10px;
}
2.6 grid
grid 布局是一种二维布局方法，允许在水平和垂直两个方向上对元素进行灵活排列。使用 display: grid; 可以将容器设置为网格容器。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三列布局 */
gap: 10px; /* 网格项之间的间隙 */
}
.grid-item {
background-color: lightpink;
padding: 10px;
}
3. 注意事项
1、使用 display 属性时，要确保它与你的整体布局策略一致。
2、某些 display 值（如 flex 和 grid）在现代浏览器中得到了广泛支持，但在老旧浏览器中可能表现不一致。
3、可以通过 JavaScript 动态改变元素的 display 属性，以实现交互效果。
4. 示例代码
以下是一个完整的 HTML 和 CSS 示例，展示了不同 display 属性值的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Display 属性示例</title>
<style>
.container {
margin: 20px;
}
.block-element {
display: block;
width: 50%;
background-color: lightblue;
margin-bottom: 10px;
}
.inline-element {
display: inline;
background-color: lightgreen;
padding: 5px;
margin-right: 10px;
}
.inline-block-element {
display: inline-block;
width: 100px;
height: 50px;
background-color: lightcoral;
margin-right: 10px;
}
.hidden-element {
display: none;
}
.flex-container {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.flex-item {
background-color: lightyellow;
padding: 10px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 20px;
}
.grid-item {
background-color: lightpink;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="block-element">Block Element</div>
<span class="inline-element">Inline Element </span><span class="inline-element">Another Inline Element</span>
<div class="inline-block-element">Inline-Block Element</div><div class="inline-block-element">Another Inline-Block Element</div>
<div class="hidden-element">Hidden Element (not visible)</div>
</div>
<div class="flex-container">
<div class="flex-item">Flex Item 1</div>
<div class="flex-item">Flex Item 2</div>
<div class="flex-item">Flex Item 3</div>
</div>
<div class="grid-container">
<div class="grid-item">Grid Item 1</div>
<div class="grid-item">Grid Item 2</div>
<div class="grid-item">Grid Item 3</div>
<div class="grid-item">Grid Item 4</div>
<div class="grid-item">Grid Item 5</div>
<div class="grid-item">Grid Item 6</div>
</div>
</body>
</html>
通过以上教程，希望你能更好地理解和运用 CSS 的 display 属性。
本文地址：https://www.tides.cn/p_css-display