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;
完全移除元素,不占据任何空间。