display css

/* 示例代码：使用 CSS 控制显示属性 */

/* 将元素设置为块级元素 */
.block-element {
    display: block;
}

/* 将元素设置为内联元素 */
.inline-element {
    display: inline;
}

/* 将元素设置为内联块级元素 */
.inline-block-element {
    display: inline-block;
}

/* 隐藏元素，但保留其在文档流中的空间 */
.hidden-element {
    display: none;
}

/* 创建一个弹性盒子容器 */
.flex-container {
    display: flex;
}

/* 创建一个多行弹性盒子容器 */
.flex-container-wrap {
    display: flex;
    flex-wrap: wrap;
}

/* 创建一个网格布局容器 */
.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
}

/* 解释说明：
- `display: block;` 使元素成为块级元素，独占一行。
- `display: inline;` 使元素成为内联元素，不会独占一行。
- `display: inline-block;` 使元素成为内联块级元素，可以设置宽度和高度，但不会独占一行。
- `display: none;` 完全隐藏元素，不占据任何空间。
- `display: flex;` 和 `display: grid;` 分别用于创建弹性盒子布局和网格布局，是现代布局方式的基础。
*/