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;
实例
一
二
三
四
五
一
二
三
四
五
一
二
三
四
五
一
二
三
四
五
参考文章
您阅读本篇文章共花了： 大家都在找：
css：css油橄榄
前端：前端面试题
发表评论