display属性


一、详解display属性

1.display属性的作用

在CSS中display属性表示“显示框类型”,即不同的盒模型。简单来说,可以把块级盒子转成内联盒子,也可以把内联盒子转成块级盒子。
display属性可以分为以下几类:
在这里插入图片描述

2.display-outside(外部值)

在这里插入图片描述
外部值就是定义自身元素的外部表现,而不影响其内的子元素。

• block:表示块级盒子像p、div等标签默认就是块级盒子。
• inline:表示内联盒子 像span、i等默认就是内联盒子。
• run-in:实验性质的属性,浏览器支持不好。

3.display-inside(内部值)

在这里插入图片描述
和外部值相反,内部值就是定义子元素布局的。像flex、grid这些设置都会影响到子元素的布局形式。

• flow-root:一个BFC的块级盒子。
• table:带有内部表格布局的块级盒子。
• flex:带有内部弹性布局的块级盒子。
• grid:带有内部网格布局的块级盒子。

4.display-listitem(列表值)

在这里插入图片描述
list-item属性值是生成一个容纳内容和单独的列表行内元素盒的块级盒子,目的是为了用div去代替

• 标签之类的,
• 元素默认就是list-item;

5.display-internal(属性值)

在这里插入图片描述
和table布局、ruby搭配一起控制页面布局的属性值,因为使用的比较少,这里不展开探讨。

6.display-box(显示值)

在这里插入图片描述
• contents:只影响其内容的样式生效,比如:字体大小、文字颜色等;但是像背景色、边框是不会生效的。
• none:从盒子树中移除,包括其所有后代元素。

7.display-legacy(混合值)

在这里插入图片描述
• inline-block:对外表现成内联盒子,对内表现成块级盒子
• inline-table:对外表现成内联盒子,对子元素表现成表格盒子
• inline-flex:对外表现成内联盒子,对子元素表现成弹性盒子
• inline-grid:对外表现成内联盒子,对子元素表现成网格盒子

8.global(全局值)

在这里插入图片描述
• inherit:继承父元素的display属性
• initial:不管父元素怎么设定,恢复到浏览器最初始时的display属性
• unset:unset混合了 inherit 和 initial。如果父元素设值了,就用父元素的设定,如果父元素没设值,就用浏览器的缺省设定。


文章标签:

原文连接:https://blog.csdn.net/qq_56402822/article/details/121863129

相关推荐

掌握CSS中的z-index

CSS(十四):盒子模型

Web端高分屏图片加载方案

CSS - 网格布局(grid)

CSS教你画一个可爱蛋

前端必备 | 3分钟白嫖我常用的免费效率工具!

如何不用一行 JS 代码做一个现代化可交互网站

CSS做一杯冷饮清凉一夏

CSS Compat 2021 和 Interop 2022中部分特性介绍

一个精灵球解决了产品经理提的3个需求!

CSS3 transform 和 canvas 背后不为人知的秘密

用Html标签和CSS3写的一个手机

做了一个星星打分效果

CSS color-scheme 和夜间模式

超酷炫的转场动画?CSS 轻松拿下!

css魔法 | 火龙の蛋

基于CSS mask-image 实现炫酷图片过渡效果之星球大战

daisyUI快速上手,解决TailwindCSS疯狂堆砌class的问题

css|这些场景题你确定你都知道吗🔥🔥

html和css的常用语法代码详解