CSS中的display属性用于控制元素的显示方式，它有以下几种值：
1、block（块级元素）
2、inline（行内元素）
3、inlineblock（行内块元素）
4、none（隐藏元素）
5、flex（弹性布局容器）
6、inlineflex（行内弹性布局容器）
7、grid（网格布局容器）
8、inlinegrid（行内网格布局容器）
9、table（表格布局容器）
10、tablerow（表格行布局容器）
11、tablecell（表格单元格布局容器）
12、tablecolumn（表格列布局容器）
13、listitem（列表项布局容器）
14、runin（在文本中运行的块级元素）
15、compact（紧凑块级元素，类似于HTML中的<dd>
16、marker（标记元素，用于表示文档中的标记）
17、inlinetable（行内表格布局容器）
18、tablecaption（表格标题布局容器）
19、flowroot（块级非替换元素，具有自动的块级格式化上下文）
20、scrollcontainer（创建一个滚动容器，当内容溢出时可以滚动）
21、inherit（继承父元素的display属性值）
以下是一些使用display属性的示例：
/* 设置div为块级元素 */
div {
display: block;
}
/* 设置span为行内元素 */
span {
display: inline;
}
/* 设置img为行内块元素 */
img {
display: inlineblock;
}
/* 设置p为隐藏元素 */
p {
display: none;
}
下面是一个关于CSS中display属性的介绍，列出了一些常用的display属性值及其作用：
| 属性值 | 描述 |
inline |
将元素作为内联元素显示（默认），不会应用width和height属性。 |
block |
将元素作为块级元素显示，会占据完整的水平空间，可以设置width和height。 |
inlineblock |
结合了inline和block的特性，元素作为内联元素显示，但可以设置宽度和高度。 |
flex |
将容器设为弹性布局，用于分配子元素的位置和大小。 |
grid |
将容器设为网格布局，用于创建基于网格的布局系统。 |
inlineflex |
将容器设为内联级别的弹性布局。 |
inlinegrid |
将容器设为内联级别的网格布局。 |
table |
将元素作为介绍显示。 |
tablecell |
将元素作为介绍单元格显示。 |
tablerow |
将元素作为介绍行显示。 |
none |
元素不会显示，不占据任何空间。 |
listitem |
将元素作为列表项显示，并添加列表标记。 |
runin |
不常用，根据上下文决定元素是内联还是块级。 |
compact |
旧式布局属性，不推荐使用，通常没有效果。 |
请注意，display: runin;和display: compact;在现代的网页设计中几乎不再使用，并且不是所有浏览器都支持这些值。display: none;与visibility: hidden;不同，后者隐藏元素但仍占据空间，而display: none;完全移除元素，不占据任何空间。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/691951.html
微信扫一扫