CSS中display属性的使用

最新推荐文章于 2025-06-04 19:50:46 发布

原创最新推荐文章于 2025-06-04 19:50:46 发布 · 1.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端开发

前端开发专栏收录该内容

2 篇文章

订阅专栏

本文深入解析CSS中的display属性，涵盖块元素、行内元素及inline-block的特性与区别，详细阐述display:none与visibility:hidden的差异，以及display:table-cell在布局中的应用技巧，包括图片垂直居中、等高布局、自动平均划分元素和去除inline-block间的空格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一块元素与行内元素

常见的块元素：div p h1~h6 p hr ul ol
常见的行元素： span strong em
特点：
块元素一独占一行，可以对其设置height和width可以定义四个方向的margin值。
行元素可以与其他元素位于一行，无法设置height和width，可以定义margin-left和margin-right。
inline-block元素具有block和inline的特性。

二 display介绍

display:none|block|inline-block|table|table-cell等

display：none可以用来隐藏元素。

列子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style>
     .div1,
     .div2,
     .div3
       {
           display: inline-block;
           text-align: center;
           width: 60px;
           height: 60px;
           font-size: 36px;
           border: 1px solid black;
       }

    </style>
</head>
<body>
<div class="warp">
    <div class="div1">A</div>
    <div class="div2">B</div>
    <div class="div3">C</div>
</div>
</body>
</html>

在这里插入图片描述

设置div2的display为none。

display：none和visibility：hidden的区别

在这里插入图片描述

display:none隐藏后不占据原来的未知也就是说元素直接消失了。
visibility：hidden 隐藏后元素依然占据原来的位置。

display：table-cell

该设置可以让元素以表格单元的形式出现，也就是说tabel-cell元素具备td的特点。
display：table-cell可以实现以下功能

图片垂直居中于元素

父元素{
display：table-cell;
vertical-align：middle;
}
子元素{
vertical-align：middle;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display:table-cell</title>
    <style>
        div{
            display: table-cell;
            height: 500px;
            width: 800px;
            border: 1px solid red;
            vertical-align: middle;
            text-align: center;
        }
        div img{
            vertical-align: middle;
            text-align: center;
        }


    </style>
</head>
<body>
<div><img src="./美女.jpg" alt="美女"></div>
</body>
</html>

在这里插入图片描述

图片等高布局
我们知道同一行的td元素的高度是相等的，table-cell也具备这个特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>等高布局</title>
    <style>
        .div0{
            display: table-row;
        }
        .div1{
            display:table-cell;
            vertical-align: middle;
            text-align: center;
            width: 150px;
            border: 1px solid black;
        }
        .div2{
            display: table-cell;
          width: 400px;
            border: 1px solid deeppink;
            border-left: none;
            padding: 10px;
        }
    </style>
</head>
<body>
<div class="div0">
    <div class="div1"><img src="./美女.jpg" alt="美女"></div>
    <div class="div2"><span>《盗墓笔记》是一本最初连载在起点中文网上的小说，后由中国友谊、时代文艺、上海文化于2007年-2011年陆续出版发行，作者南派三叔。 [1]  《盗墓笔记捌：大结局（上、下）》于2011年12月19日上市，至此《盗墓笔记》系列完结，共出版实体书九本。《盗墓笔记》系列是南派三叔的代表作，其堪称近年来中国出版界的经典之作，获得百万读者狂热追捧。南派三叔也凭此作名满天下，跻身中国超级畅销书作家行列。
2015年，《盗墓笔记》由欢瑞世纪影视传媒股份有限公司改编成为网络剧 [2]  。2016年11月，《盗墓笔记》荣登2016中国泛娱乐指数盛典“中国IP价值榜-网络文学榜top10” [3]  。2017年7月12日，《2017猫片 胡润原创文学IP价值榜》发布，《盗墓笔记》排名第二。 [4] </span></div>
</div>
</body>
</html>

在这里插入图片描述
在该列子中我们没有设置高度，可见display：table-cell可以实现等高布局。

自动平均划分元素

父元素{display：table}
子元素{display：table-cell}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动平均划分元素</title>
    <style>
        ul{
            display: table;


        }
        li{
            display: table-cell;
            list-style: none;
            height: 60px;
            width: 60px;
            text-align: center;
            line-height: 60px;
        }
        ul li:nth-child(1){background-color: red}
        ul li:nth-child(2){background-color: yellow}
        ul li:nth-child(3){background-color: blue}
        ul li:nth-child(4){background-color: green}
        ul li:nth-child(5){background-color: orange}


    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
</body>
</html>

在这里插入图片描述

去除inline-block之间的空格

设置完inline-block后会出现这种情况

父元素{font-size：0}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style>
        .warp{
            font-size: 0;
        }
     .div1,
     .div2,
     .div3
       {
           display: inline-block;
           text-align: center;
           width: 60px;
           height: 60px;
           font-size: 36px;
           border: 1px solid black;
       }

    </style>
</head>
<body>
<div class="warp">
    <div class="div1">A</div>
    <div class="div2">B</div>
    <div class="div3">C</div>
</div>
</body>
</html>