css中display所有属性简单了解及使用

CSS的display属性用于定义建立布局时元素生成的显示框类型。这个属性的不同值决定了元素如何被显示，并且可以影响其子元素的布局。

常用的display属性值包括：

1. none：元素不被显示。
2. block：元素作为块级元素显示，前后会带有换行符。
3. inline：默认值。元素被显示为内联元素，元素前后没有换行符。
4. inline-block：行内块元素，既不会产生块级元素的换行符，也不会有内联元素的空白间隔。
5. flex：弹性盒模型，用于弹性布局。
6. grid：网格布局，用于二维布局。
7. table：表格布局，类似于<table>元素的显示。

示例代码：

/* 隐藏元素 */
.none-example {
    display: none;
}
 
/* 创建块级元素 */
.block-example {
    display: block;
}
 
/* 创建内联元素 */
.inline-example {
    display: inline;
}
 
/* 创建行内块元素 */
.inline-block-example {
    display: inline-block;
}
 
/* 使用弹性盒模型 */
.flex-example {
    display: flex;
}
 
/* 使用网格布局 */
.grid-example {
    display: grid;
}
 
/* 使用表格布局 */
.table-example {
    display: table;
}

在HTML中使用这些类：

<div class="none-example">这个元素不会被显示</div>
<div class="block-example">这是一个块级元素</div>
<span class="inline-example">这是一个内联元素</span>
<div class="inline-block-example">这是一个行内块元素</div>
<div class="flex-example">这是一个弹性盒容器</div>
<div class="grid-example">这是一个网格容器</div>
<div class="table-example">这是一个表格布局容器</div>

使用display属性时，根据需要选择合适的值以创建所需的布局效果。