CSS Display(显示)

最新推荐文章于 2024-08-27 18:15:32 发布

三季人 G

最新推荐文章于 2024-08-27 18:15:32 发布

阅读量245

点赞数

分类专栏：网络 JS 文章标签： css 前端 html

本文链接：https://blog.csdn.net/QYgujingjing/article/details/128664568

版权

网络同时被 2 个专栏收录

86 篇文章 0 订阅

订阅专栏

84 篇文章 0 订阅

订阅专栏

CSS Display(显示)

display

CSS display 属性设置元素是否被视为块或者内联元素以及用于子元素的布局，例如流式布局、网格布局或弹性布局。
在这里插入图片描述

形式上，display 属性设置元素的内部和外部的显示类型。外部类型设置元素参与流式布局；内部类型设置子元素的布局。一些 display 值在它们自己的单独规范中完整定义；例如，在 CSS 弹性盒模型的规范中，定义了声明 display: flex 时会发生的细节。

举例说明:

/* precomposed values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* box generation */
display: none;
display: contents;

/* two-value syntax */
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;

/* other values */
display: table;
display: table-row; /* all table elements have an equivalent CSS display value */
display: list-item;

/* Global values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

例子1, 显示与隐藏设置:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素隐藏--display:none</title>
        <style>
            .display{
                display:none;
            }
        </style>
    </head>
    <body>
        <div>正常显示元素</div>
        <div class="display">隐藏元素</div>
        <div>正常显示元素</div>
    </body>
</html>

效果图:
在这里插入图片描述

属性值

属性	描述
none	此元素不会被显示。
inline-block	行内块元素。（CSS2.1 新增的值）
run-in	此元素会根据上下文作为块级元素或内联元素显示。
inherit	规定应该从父元素继承 display 属性的值。
table-caption	此元素会作为一个表格标题显示
table-cell	此元素会作为一个表格单元格显示
table-header-group	此元素会作为一个或多个行的分组来显示
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
list-item	此元素会作为列表显示。
table-row-group	此元素会作为一个或多个行的分组来显示
table-column	此元素会作为一个单元格列显示
table-footer-group	此元素会作为一个或多个行的分组来显示
inline-table	此元素会作为内联表格来显示，表格前后没有换行符。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示，表格前后带有换行符。
table-column-group	此元素会作为一个或多个列的分组来显示
table-row	此元素会作为一个表格行显示