跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
HTML / CSS大前端java

CSS 元素显示模式详解：块级、行内与行内块

综述由AI生成介绍 CSS 中元素的三种核心显示模式：块级（Block）、行内（Inline）和行内块（Inline-block）。详细阐述了各模式的特性，如独占一行、宽高控制、边距生效范围及嵌套规则。通过 CSS 的 display 属性演示了模式间的转换方法，并结合小米侧边栏实战案例展示了如何应用这些知识进行布局。最后提供了完整的 HTML 与 CSS 综合代码示例供参考。

板砖工程师发布于 2026/4/6更新于 2026/5/2248 浏览
CSS 元素显示模式详解：块级、行内与行内块

CSS 元素显示模式

2.1 什么是元素显示模式？

元素显示模式指的是 HTML 元素在页面中默认的表现形态，它决定了元素的排列方式、尺寸计算规则和嵌套关系。简单来说，就是元素'如何展示自己'以及'如何与其他元素相处'。

浏览器会为每个 HTML 标签预设默认的显示模式，例如：

  • <div> 默认占据一整行（块级模式）
  • <span> 默认与其他元素并排显示（行内模式）
  • <input> 既可以并排显示又能设置宽高（行内块模式）

我们可以通过 CSS 的 display 属性修改元素的显示模式，这是实现灵活布局的关键技巧。

2.2 三大核心显示模式详解
1. 块级元素（Block Level Elements）

典型标签：<div>、<h1>-<h6>、<p>、<ul>、<ol>、<li>、<header>、<footer> 等

核心特性：

  • 独占一行：无论内容多少，都会单独占据一整行空间
  • 尺寸可控：可以通过 width 和 height 属性设置宽高
  • 默认宽度：未设置时默认占满父容器的 100% 宽度
  • 边距生效：margin 和 padding 的四个方向（上下左右）都能正常生效
  • 容器特性：可以嵌套其他块级元素或行内元素

代码示例：

.change {
    height: 200px;
    background-color: aqua;
}

注意事项：

  • 文字类块元素（如 <p>、<h1>-<h6>）不能嵌套其他块级元素，例如 <p> 中不能放 <div>
  • 块元素虽然可以嵌套行内元素，但语义上应保持合理（如导航容器嵌套链接）
2. 行内元素（Inline Elements）

典型标签：<span>、<a>、<strong>、<em>、<b>、<i>、<del>、<ins> 等

核心特性：

  • 并肩排列：多个行内元素可以在同一行显示
  • 尺寸受限：width 和 height 设置无效，尺寸由内容决定
  • 边距限制：margin 和 padding 仅左右方向生效，上下方向不影响布局
  • 嵌套限制：只能容纳文本或其他行内元素，不能嵌套块级元素

    • 代码示例：

    .span1 {
    /* 宽高设置无效 */
    width: 100px;
    height: 100px;
    /* 背景色等样式有效 */
    background-color: hotpink;
}

    注意事项：

    • 链接 <a> 不能嵌套其他链接
    • 行内元素虽然不能设置宽高，但可以通过转换显示模式实现（见后文）
    3. 行内块元素（Inline-Block Elements）

    典型标签：<img>、<input>、<td> 等

    核心特性：

    • 兼具两者优点：
      • 可以和其他行内元素并排显示（行内元素特性）
      • 可以设置 width、height（块级元素特性）
      • margin 和 padding 四个方向均有效（块级元素特性）
    • 默认宽度：由内容决定（类似行内元素）
    • 间隙特性：相邻行内块元素之间会有默认空白间隙

    代码示例：

    input {
    width: 249px;
    height: 50px;
}
    2.3 元素显示模式的转换语法

    实际开发中，我们经常需要改变元素的默认显示模式以实现特定布局。CSS 提供了三种主要转换方式：

    1. 转为块级元素：display: block

    适用场景：

    • 需要让行内元素（如 <a>）独占一行
    • 需要为行内元素设置宽高
    • 需要让链接等可点击区域扩大
    .a1 {
    width: 150px;
    height: 50px;
    /* 转换为块级元素 */
    display: block;
    background-color: pink;
}
    2. 转为行内元素：display: inline

    适用场景：

    • 需要让块级元素（如 <div>）并排显示
    • 需要取消块级元素的默认独占一行特性
    .change2 {
    /* 转换为行内元素 */
    display: inline;
}
    3. 转为行内块元素：display: inline-block

    适用场景：

    • 需要元素并排显示且能设置宽高（如导航按钮、表单控件）
    • 需要保持行内特性的同时拥有块级元素的尺寸控制能力
    .change3 {
    width: 300px;
    height: 30px;
    background-color: skyblue;
    /* 转换为行内块元素 */
    display: inline-block;
}
    2.4 实战案例：小米侧边栏实现

    以小米官网侧边栏为例，展示元素显示模式转换的实际应用：

    实现思路：

    1. 将行内元素 <a> 转换为块级元素，使其独占一行并可设置宽高
    2. 设置背景色和文字样式
    3. 使用 line-height 实现文字垂直居中
    4. 添加 hover 效果实现交互反馈
    .a-change {
    color: white;
    width: 230px;
    height: 40px;
    background-color: #535758;
    /* 转换为块级元素 */
    display: block;
    text-decoration: none;
    font-size: 14px;
    text-indent: 2em;
    /* 文字垂直居中（行高=盒子高度） */
    line-height: 40px;
}
/* 鼠标悬停效果 */
a:hover {
    background-color: #ff6700;
}

    HTML 结构：

    <a href="#" class="a-change">手机 电话卡</a>
<a href="#" class="a-change">电视 盒子</a>
<a href="#" class="a-change">笔记本 平板</a>
<!-- 更多链接 -->
    2.5 综合代码演示
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素显示模式</title>
    <!-- ------ 元素显示模式 ------ -->
    <!-- 1.作用：网页标签非常多，在不同地方会用到不同的标签，了解他们的特点可以更好的布局我们的网页 -->
    <!-- 2.元素显示模式就是 元素 (标签) 以什么方式进行显示，比如<div>自己独占一行，而<span>一行可以放多个 -->
    <!-- 3.HTML 元素一般分为 块元素 和 行内元素 两种类型 -->
    <style>
        /* 111.块元素 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>，其中<div>标签是最典型的块元素 */
        /* 11.块元素特点： */
        /* 1.独占一行 */
        /* 2.高度、宽度、外边距和内边距都可以控制 */
        /* 3.宽度默认是容器 (父级宽度) 的 100% */
        /* 4.是一个容器和盒子，里面可以放行内或块级元素 */
        /* 22.注意： */
        /* 1.文字类元素不能使用块元素 */
        /* 2.<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div> */
        /* 3.同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素 */
        /* 例如： */
        /* <p> */
        /*   <div>这里有问题</div> */
        /* </p> */
        .change {
            /* width: 200px; */
            height: 200px;
            background-color: aqua;
        }
        /* 222.行内元素 常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span> */
        /* 其中<span>是最典型的行内元素（内联元素） */
        /* 11.行内元素的特点： */
        /* 1.相邻行内元素在一行上，即一行可以显示多个 */
        /* 2.高、宽直接设置是无效的 */
        /* 3.默认宽度就是它本身内容的宽度 */
        /* 4.行内元素只能容纳文本后者其他行内元素 */
        /* 22.注意： */
        /* 1.链接里面不能再放链接 */
        /* 2.特殊情况链接<a>里面可以放块级元素，但给<a>转换一下块级模式最安全 */
        .span1 {
            /* 这里设置宽度和高度是无效的，但是设置其他的是可以的，比如下面设置背景颜色 */
            width: 100px;
            height: 100px;
            background-color: hotpink;
        }
        /* 333.行内块元素 在行内元素中有几个特殊的标签 <img>、<input>、<td>，他们同时具有块元素和行内元素的特点（行内块元素）*/
        /* 11.行内块元素的特点 */
        /* 1.和相邻行内元素（行内块）在一行上，但是他们之间会有空白间隙，一行可以显示多个（行内元素的特定） */
        /* 2.默认宽度就是它本身内容的宽度（行内元素的特点） */
        /* 3.高度、行高、外边距和内边距都可以控制（块级元素的特点） */
        input {
            width: 249px;
            height: 50px;
        }
        /* --- 元素显示模式的转换 --- */
        /* (特殊情况下，我们需要元素模式的转换 简单理解：一个模式的元素需要另一种模式的特性)*/ */
        /* 1. 转换为块元素：display:block */
        /* 2. 转换为行内元素：display:inline; */
        /* 3. 转换为行内块元素：display:inline-block; */
        /* 这里想要增加链接<a>的触发范围 */
        .a1 {
            width: 150px;
            height: 50px;
            /* 1.把行内元素<a>转换为块级元素 */
            /* 这样 width 和 height 的修改才能生效 */
            display: block;
            background-color: pink;
        }
        .change2 {
            /* 2.把块级元素转换为行内元素，实现一行放多个块级元素 */
            display: inline;
        }
        .change3 {
            /* 把行内元素转换为行内块元素 */
            width: 300px;
            height: 30px;
            background-color: skyblue;
            /* 转换前，对于行内元素来说，宽度和高度的设置是无效的 */
            display: inline-block;
        }
        /* 简洁版小米侧边栏案例 */
        .a-change {
            /* 设置字体颜色 */
            color: white;
            width: 230px;
            height: 40px;
            background-color: #535758;
            /* 把行内元素转换为块元素 */
            display: block;
            /* 取消链接下划线 */
            text-decoration: none;
            font-size: 14px;
            /* 空两个格子 */
            text-indent: 2em;
            /* ! 实现单行文字垂直居中 ! */
            /* 解决方案：让文字的行高等于盒子的高度 */
            /* 原理：行高由上空隙、文本本省的高度、下空隙组成 */
            /* 简单理解：行高的上空隙和下空隙把文字挤到中间了， */
            /* 所以如果行高小于盒子高度，文字就会偏上；吐过行高大于盒子高度，则文字会偏下 */
            line-height: 40px;
        }
        a:hover {
            background-color: #ff6700;
        }
        del {
            display: block;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- 块元素测验 -->
    <div class="change">比较霸道，自己独占一行</div>
    <!-- 不能这么用！！用浏览器检查会发现有问题 -->
    <p><div class="change">这里有问题</div></p>
    <!-- 行内元素测验 -->
    <span class="span1">pink 老师你怎么穿着品如的衣服呢</span>
    <strong>品如的衣服</strong>
    <span class="span1">pink 老师</span>
    <strong>品如的衣服</strong>
    <!-- 行内块元素测验 -->
    <input type="text" />
    <input type="text" />
    <!-- 元素模式的转换测验 -->
    <!-- 这里想要增加链接<a>的触发范围 -->
    <a href="picture/img1.jpg" class="a1">夏至未至</a>
    <a href="picture/img1.jpg" class="a1">夏至未至</a>
    <!-- 使块级元素在一行显示多个 -->
    <div class="change2">我是块级元素，将要通过元素转换模式 (改为行内元素)</div>
    <div class="change2">我是块级元素 </div>
    <!-- 想行内元素的宽度和高度 -->
    <span class="change3">把行内元素转换为行内块元素</span>
    <span class="change3">把行内元素转换为行内块元素</span>
    <br />
    <!-- 简洁版小米侧边栏案例 主要思路 1.链接<a>要实现竖着显示 (行内元素转换为块级元素，这样链接就可以独占一行并且有高度和宽度) -->
    <!-- 2.链接有背景颜色，鼠标经过<a>时链接变色 -->
    <a href="https://re.jd.com/search?keyword=%E7%94%B5%E8%AF%9D%E5%8D%A1&enc=utf-8" target="_blank" class="a-change">手机 电话卡</a>
    <a href="picture/img1.jpg" class="a-change">电视 盒子</a>
    <a href="#" class="a-change" target="_blank">笔记本呢 平板</a>
    <a href="#" class="a-change">出行 穿戴</a>
    <a href="#" class="a-change">智能 路由器</a>
    <a href="#" class="a-change">健康儿童</a>
    <a href="#" class="a-change">耳机 音响</a>
    <del>你好啊</del>林七夜 
</body>
</html>

    目录

    1. CSS 元素显示模式
    2. 2.1 什么是元素显示模式？
    3. 2.2 三大核心显示模式详解
    4. 1. 块级元素（Block Level Elements）
    5. 2. 行内元素（Inline Elements）
    6. 3. 行内块元素（Inline-Block Elements）
    7. 2.3 元素显示模式的转换语法
    8. 1. 转为块级元素：display: block
    9. 2. 转为行内元素：display: inline
    10. 3. 转为行内块元素：display: inline-block
    11. 2.4 实战案例：小米侧边栏实现
    12. 2.5 综合代码演示
    • 💰 8折买阿里云服务器限时8折了解详情
    • Magick API 一键接入全球大模型注册送1000万token查看
    • 🤖 一键搭建Deepseek满血版了解详情
    • 一键打造专属AI 智能体了解详情
    极客日志微信公众号二维码

    微信扫一扫，关注极客日志

    微信公众号「极客日志V2」，在微信中扫描左侧二维码关注。展示文案：极客日志V2 zeeklog

    更多推荐文章

    查看全部
    • 英伟达开源 DreamDojo：4.4 万小时视频数据破解机器人数据鸿沟
    • 从语法纠错到项目重构：Python+Copilot 全流程开发效率提升指南
    • Pi0 机器人大模型在昇腾 A2 上的部署与性能测评
    • 《星辰 RPA 全自动：做一个小红书自动发文机器人》
    • Android WebRTC 播放流实战：从协议解析到性能优化
    • 无人机操控模式解析：美国手、日本手、中国手
    • Go 语言命令行 AI 对话客户端：环境部署与核心实现
    • Vivado 官方安装指南：从注册账号到完成部署
    • ProcessHacker 系统事件监控与日志分析技巧
    • 大模型 SFT 的 100 个关键点：深入剖析与应用指南
    • Buzz 离线语音转文字工具：Whisper 模型集成与实战
    • 基于 Vivado 的 RISC-V 五级流水线 CPU FPGA 实现详解
    • ES6 语法详解：进制、Symbol 与 Class
    • AI 编程工具对比：Cursor、GitHub Copilot 与 Claude Code
    • C++ AVL 树原理与实现详解
    • Python + Blender 5.0 几何节点实战教程
    • 2 个原因解答：为什么网络安全缺口大，招聘却很少？
    • AI 编程工具深度对比：Cursor、Copilot、Trae 与 Claude Code
    • VSCode + GitHub Copilot AI 编程实战教程
    • Unity WebGL 全屏控制与 UI 自适应实践指南

    相关免费在线工具

    • Keycode 信息

      查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online

    • Escape 与 Native 编解码

      JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online

    • JavaScript / HTML 格式化

      使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online

    • JavaScript 压缩与混淆

      Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online

    • Base64 字符串编码/解码

      将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online

    • Base64 文件转换器

      将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online