CSS中的display属性用于定义元素的显示类型,包括块级元素、行内元素、列表项目等。通过调整display属性,可以改变元素的布局和排列方式。
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属性的示例:
/* 设置p为块级元素 */p { 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;
完全移除元素,不占据任何空间。