16. 显示与隐藏

本节目标：掌握 display:none、visibility:hidden、opacity:0 三种隐藏方式的区别，理解块级元素与内联元素的特性，能根据需求选择合适的显示模式。

三种隐藏方式总览

CSS 提供了三种”隐藏元素”的方法，它们看起来效果类似，但底层行为完全不同。先记住一句话：display:none 直接抹掉，visibility:hidden 占位隐身，opacity:0 只是看不见。

display:none —— 彻底消失

display:none 会把元素从文档流中完全移除，不占任何空间，页面就像它不存在一样。

<!DOCTYPE html>
<html lang="zh">
<head>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background: #4CAF50;
            margin: 10px;
        }
        .removed {
            display: none; /* 彻底消失，不占位 */
        }
    </style>
</head>
<body>
    <div class="box">盒子 1</div>
    <div class="box removed">盒子 2（被隐藏）</div>
    <div class="box">盒子 3</div>
</body>
</html>

display:none 不会影响页面布局，后续元素会自动补位。

visibility:hidden —— 占位隐身

visibility:hidden 让元素不可见，但它仍然占据原来的空间，页面布局保持不变。

.hidden-box {
    visibility: hidden; /* 看不见，但位置还在 */
}

适合需要保持布局稳定的场景，比如表格单元格隐藏。

opacity:0 —— 完全透明

opacity 控制透明度，取值 0 到 1。opacity:0 让元素完全透明，但它依然占位，并且可以响应事件（比如点击）。

.fade-out {
    opacity: 0; /* 完全透明，但仍占位且可点击 */
}

三者的核心区别

属性	占位	响应事件	适用场景
display:none	否	否	完全移除元素
visibility:hidden	是	否	隐藏但保留空间
opacity:0	是	是	淡出动画、交互效果

块级元素与内联元素

理解 display 属性，必须先搞清楚两种基本元素类型。

块级元素（block）：独占一行，可以设置宽高。比如 <div>、<p>、<h1>-<h6>。

内联元素（inline）：不独占一行，宽高由内容决定。比如 <span>、<a>、<strong>。

/* 块级元素示例 */
div {
    display: block; /* 默认值，独占一行 */
}

/* 内联元素示例 */
span {
    display: inline; /* 默认值，同行排列 */
}

改变元素的显示类型

CSS 允许你随意切换元素的显示类型，这是布局的基础技巧。

把内联元素变成块级：

span {
    display: block; /* 现在 span 会独占一行 */
}

把块级元素变成内联：

li {
    display: inline; /* 导航菜单常用：让列表项横排 */
}

inline-block —— 两全其美：

.menu-item {
    display: inline-block; /* 同行排列，但可设宽高 */
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}

inline-block 是最常用的显示模式之一，既有 inline 的同行特性，又有 block 的宽高控制能力。

实战：水平导航菜单

把垂直列表变成水平菜单，这是 display 最经典的应用。

<!DOCTYPE html>
<html lang="zh">
<head>
    <style>
        .nav {
            list-style: none; /* 去掉列表圆点 */
            padding: 0;
            background: #333;
        }
        .nav li {
            display: inline-block; /* 横排显示 */
        }
        .nav a {
            display: block; /* 让链接占满整个 li */
            padding: 12px 20px;
            color: white;
            text-decoration: none;
        }
        .nav a:hover {
            background: #555;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="#">首页</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">联系</a></li>
    </ul>
</body>
</html>

实战：下拉菜单的显示/隐藏

结合 display 和 :hover 伪类，可以实现纯 CSS 下拉菜单。

<!DOCTYPE html>
<html lang="zh">
<head>
    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-menu {
            display: none; /* 默认隐藏 */
            position: absolute;
            background: white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            min-width: 120px;
        }
        .dropdown:hover .dropdown-menu {
            display: block; /* 悬停时显示 */
        }
        .dropdown-menu a {
            display: block;
            padding: 10px 16px;
            color: #333;
            text-decoration: none;
        }
        .dropdown-menu a:hover {
            background: #f5f5f5;
        }
    </style>
</head>
<body>
    <div class="dropdown">
        <button>菜单</button>
        <div class="dropdown-menu">
            <a href="#">选项一</a>
            <a href="#">选项二</a>
            <a href="#">选项三</a>
        </div>
    </div>
</body>
</html>

display:none 配合 JavaScript 的 toggle 类，是开发中显示/隐藏元素最常用的组合。

小结

display:none：彻底移除，不占位，不响应事件
visibility:hidden：隐藏但占位，不响应事件
opacity:0：透明但占位，可响应事件
block 独占一行，inline 同行排列，inline-block 两者兼顾
改变 display 值是 CSS 布局的核心技巧