CSS（八）CSS显示模式display属性

CSS显示模式display属性（元素布局核心）

核心知识点

display属性用于控制HTML元素的显示方式，是实现菜单项水平排列、下拉菜单显示/隐藏的核心，常用属性值如下：

none：隐藏元素，且不为元素保留物理空间，元素彻底从页面中消失，是下拉菜单显示/隐藏的核心属性。
block：将元素转为块级元素，特点：独占一行、可设置宽高、默认宽度占满父元素，例：<div>、<p>、<h1>~<h6>默认为block。
inline：将元素转为行内元素，特点：不独占一行、无法设置宽高、宽高由内容撑开，例：<a>、<span>默认为inline。
inline-block：行内块元素，兼具块级和行内元素特点：不独占一行、可设置宽高，是实现菜单项水平排列的经典方式，例：<img>默认为inline-block。
flex：弹性盒容器，详见后续弹性布局模块。

配套案例练习：inline-block实现水平导航菜单

需求：基于上一个列表案例，用inline-block实现主菜单项的水平排列，完成下拉菜单的基础结构与默认隐藏效果。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display属性练习</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .nav-container {
            width: 100%;
            background-color: #2c7a7b;
            text-align: center; /* 让inline-block元素水平居中 */
        }
        .main-nav {
            list-style: none;
        }
        /* 主菜单项水平排列 */
        .main-nav > li {
            /* 转为行内块元素，实现水平排列 */
            display: inline-block;
            position: relative; /* 为后续下拉菜单定位做铺垫 */
        }
        .main-nav li a {
            /* a标签转为块元素，让整个菜单项都可点击 */
            display: block;
            padding: 15px 20px;
            color: #fff;
            text-decoration: none; /* 清除a标签默认下划线 */
            font-family: "微软雅黑", sans-serif;
        }
        /* 鼠标悬停变色 */
        .main-nav li a:hover {
            background-color: #235f5f;
        }
        /* 下拉菜单默认隐藏 */
        .sub-nav {
            list-style: none;
            /* 默认隐藏 */
            display: none;
            background-color: #389798;
            min-width: 150px;
        }
        .sub-nav li {
            /* 下拉菜单项垂直排列 */
            display: block;
        }
    </style>
</head>
<body>
    <nav class="nav-container">
        <ul class="main-nav">
            <li><a href="#home">首页</a></li>
            <li>
                <a href="#scenic">景点介绍</a>
                <ul class="sub-nav">
                    <li><a href="#nature">自然风光</a></li>
                    <li><a href="#culture">人文古迹</a></li>
                    <li><a href="#village">乡村旅游</a></li>
                </ul>
            </li>
            <li><a href="#food">特色美食</a></li>
            <li><a href="#activity">文旅活动</a></li>
            <li><a href="#traffic">交通指南</a></li>
            <li><a href="#contact">联系我们</a></li>
        </ul>
    </nav>
</body>
</html>

案例说明：

用display: inline-block实现主菜单项的水平排列，是PC端导航栏的经典实现方式；
用display: block将a标签转为块级元素，让整个菜单项区域都可点击，提升用户体验；
用display: none将下拉菜单默认隐藏，为后续:hover显示做铺垫，是下拉菜单的核心交互逻辑。