意见箱
恒创运营部门将仔细参阅您的意见和建议,必要时将通过预留邮箱与您保持联络。感谢您的支持!
意见/建议
提交建议

css中display属性_CSS

来源:佚名 编辑:佚名
2024-06-16 01:30:49
CSS中的display属性用于定义元素的显示类型,包括块级元素、行内元素、列表项目等。通过调整display属性,可以改变元素的布局和排列方式。

CSS中的display属性用于控制元素的显示方式,它有以下几种值:

1、block(块级元素)

2、inline(行内元素)


css中display属性_CSS

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

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

本网站发布或转载的文章均来自网络,其原创性以及文中表达的观点和判断不代表本网站。
上一篇: php 中客户端与服务器关系_PHP 下一篇: python语音合成_语音合成