css中的display

最新推荐文章于 2024-04-28 14:26:53 发布

前端炮灰预备员

最新推荐文章于 2024-04-28 14:26:53 发布

阅读量267

点赞数

分类专栏： html5/css3

本文链接：https://blog.csdn.net/qq_41706280/article/details/102710881

版权

html5/css3 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

在css中，要确定一个元素，不止要确定其大小（width,height)，位置（position），还要确定其显示（display）

display 设置一个元素该如何显示

1. display : none

隐藏该元素，且该元素在文档流中不占有任何空间，相当于将其抹去了一般，但是在dom中它还是存在的，谨记

（延申：visibility : hidden 也是隐藏该元素，但是它在文档流中占有空间）

display: none;

    <style>
        p{
            font-size : 20px;
            background-color: red;
            /*为了看的更明白将margin抹去*/
            margin : 0;
        }
        #second{
            display: none;
        }
    </style>
</head>
<body>
    <p>111111</p>
    <p id="second">222222</p>
    <p>333333</p>
</body>

在这里插入图片描述
visibility : hidden

    <style>
        p{
            font-size : 20px;
            background-color: red;
            /*为了看的更明白将margin抹去*/
            margin : 0;
        }
        #second{
            visibility : hidden;
        }
    </style>
</head>
<body>
    <p>111111</p>
    <p id="second">222222</p>
    <p>333333</p>
</body>

在这里插入图片描述

2. display : block

将一个元素显示为块元素

块元素：占领一整行，可设置width,height,padding,margin,支持margin : auto

常见块元素：div、p、h、form、ul、li、table等

3. display : inline

将一个元素显示为行内元素

行内元素：不换行，不可设置width,height，一般由其内部的文字撑开，由文字宽高决定。不可设置上下的padding,margin，可设置左右的padding,margin

常见行内元素：span、a、i 等等

4. display : inline-block

将一个元素显示为行内块元素

算是中和了块元素和行内元素。不换行，但可设置width,height,padding,margin,不过不支持margin : auto,若是要使其居中可用父容器居中。一般要使块元素水平排列，比如做导航条使li水平排列，则可以将li设为行内块元素，也可用float（但是float会影响文档流，所以不建议使用）

常见行内块元素：input、button、textarea等

5.display : inherit

继承父元素的display属性

还有其他的什么display : flex; display : grid;这些都是布局，就不在这里说了

前端炮灰预备员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css中的display

在css中，要确定一个元素，不止要确定其大小（width,height)，位置（position），还要确定其显示（display）display 设置一个元素该如何显示1. display : none隐藏该元素，且该元素在文档流中不占有任何空间，相当于将其抹去了一般（延申：visibility : hidden 也是隐藏该元素，但是它在文档流中占有空间）display: none;...
复制链接

扫一扫

专栏目录