零基础学习CSS(17)——display、visibility

Dragon水魅

发布于 2026-01-23 19:05:37

910

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/

学习正文

display：https://man.ilovefishc.com/pageCSS3/display.html visibility：https://man.ilovefishc.com/pageCSS3/visibility.html

可通过 display 使元素在行内元素和块级元素中互换：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>元素尺寸</title>
    <style type="text/css">
        span {
            display: block;
            /* display: inline  设置为行内元素 */
        }
    </style>
</head>
<body>
    <span>span是行内元素</span>
    <span>行内元素</span>
    <span>无法换行</span>
</body>
</html>

使用 inline-block 设置行内块元素：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>元素尺寸</title>
    <style type="text/css">
        #niv a{
            display: inline-block;
            width: 200px;
            height: 50px;
            color: white;
            background: #429296;
            text-align: center;  /* 水平居中 */
            line-height: 50px;  /* 垂直居中（和height数值一样） */
        }
    </style>
</head>
<body>
    <div id="niv">
        <a href="https://www.baidu.com/">百度</a>
        <a href="https://cn.bing.com/">Bing</a>
        <a href="https://www.sogou.com/">搜狗</a>
        <a href="https://www.so.com/">360搜索</a>
    </div>
</body>
</html>

使用 display: none 使元素消失：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>元素尺寸</title>
    <style type="text/css">
        #none {
            display: none;
        }
    </style>
</head>
<body>
    <div id="niv">
        <p>第一个</p>
        <p id="none">第二个消失了</p>
        <p>第三个</p>
    </div>
</body>
</html>

使用 visibility: hidden 使元素消失并且占位：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>元素尺寸</title>
    <style type="text/css">
        #none {
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div id="niv">
        <p>第一个</p>
        <p id="none">第二个消失了</p>
        <p>第三个</p>
    </div>
</body>
</html>