display

CSSdisplay 属性设置元素是否被视为块级或行级盒子以及用于子元素的布局,例如流式布局、网格布局或弹性布局。形式上,display 属性设置元素的内部和外部的_显示类型_。外部类型设置元素参与流式布局;内部类型设置子元素的布局。一些 display 值在它们自己的单独规范中完整定义;例如,在 CSS 弹性盒模型的规范中,定义了声明 display: flex 时会发生的细节。

尝试一下

语法

CSS display 规定使用的关键字。cssCopy to Clipboard

/* 块级元素展示:独占一行 */

display: block;

/* 内联元素展示:与其他内联元素同行显示 */

display: inline;

/* 行内块级元素展示:兼具内联与块级特性 */

display: inline-block;

/* 弹性布局容器:用于灵活布局 */

display: flex;

/* 行内弹性布局容器 */

display: inline-flex;

/* 网格布局容器:用于二维布局 */

display: grid;

/* 行内网格布局容器 */

display: inline-grid;

/* 创建一个块级流容器:隔离其内容,防止外部影响 */

display: flow-root;

/* 隐藏元素:不产生框,不渲染元素 */

display: none;

/* 将元素的子元素提升至该元素的外部:用于复杂的嵌套结构 */

display: contents;

/* 混合布局模式:根据浏览器支持应用不同的布局策略 */

/* 块级与弹性布局组合 */

display: block flex;

/* 块级与流布局组合 */

display: block flow;

/* 块级与流根布局组合 */

display: block flow-root;

/* 块级与网格布局组合 */

display: block grid;

/* 行内与弹性布局组合 */

display: inline flex;

/* 行内与流布局组合 */

display: inline flow;

/* 行内与流根布局组合 */

display: inline flow-root;

/* 行内与网格布局组合 */

display: inline grid;

/* 表格相关展示属性:用于表格布局 */

display: table; /* 表格容器 */

display: table-row; /* 表格行 */

/* 列表项展示方式 */

display: list-item;

/* 继承父元素的display属性 */

display: inherit;

/* 使用元素的初始display值 */

display: initial;

/* 回复到浏览器的默认样式(如果存在的话) */

display: revert;

/* 类似revert,但只影响当前层及其子层 */

display: revert-layer;

/* 将display属性重置为其默认的非继承值 */

display: unset;

实例

页面标题

参考文章

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: