网站推广.NET

网站推广.NET

css中display属性_CSS

来源:互联网

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 将元素作为内联元素显示(默认),不会应用widthheight属性。
block 将元素作为块级元素显示,会占据完整的水平空间,可以设置widthheight
inlineblock 结合了inlineblock的特性,元素作为内联元素显示,但可以设置宽度和高度。
flex 将容器设为弹性布局,用于分配子元素的位置和大小。
grid 将容器设为网格布局,用于创建基于网格的布局系统。
inlineflex 将容器设为内联级别的弹性布局。
inlinegrid 将容器设为内联级别的网格布局。
table 将元素作为介绍显示。
tablecell 将元素作为介绍单元格显示。
tablerow 将元素作为介绍行显示。
none 元素不会显示,不占据任何空间。
listitem 将元素作为列表项显示,并添加列表标记。
runin 不常用,根据上下文决定元素是内联还是块级。
compact 旧式布局属性,不推荐使用,通常没有效果。

请注意,display: runin;display: compact;在现代的网页设计中几乎不再使用,并且不是所有浏览器都支持这些值。display: none;visibility: hidden;不同,后者隐藏元素但仍占据空间,而display: none;完全移除元素,不占据任何空间。

cssdisplay