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 实战案例：小米侧边栏实现

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

实现思路：

将行内元素 <a> 转换为块级元素，使其独占一行并可设置宽高
设置背景色和文字样式
使用 line-height 实现文字垂直居中
添加 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>
  <style>
    /* 111.块元素 */
    .change {
      /* width: 200px; */
      height: 200px;
      background-color: aqua;
    }

    /* 222.行内元素 */
    .span1 {
      /* 这里设置宽度和高度是无效的，但是设置其他的是可以的，比如下面设置背景颜色 */
      width: 100px;
      height: 100px;
      background-color: hotpink;
    }

    /* 333.行内块元素 */
    input {
      width: 249px;
      height: 50px;
    }

    /* --- 元素显示模式的转换 --- */
    /* 这里想要增加链接<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="#" class="a1">夏至未至</a>
  <a href="#" 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="#" target="_blank" class="a-change">手机 电话卡</a>
  <a href="#" 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>

显示效果：

综合代码演示效果

学习资源推荐

MDN Web Docs - 最权威的 CSS 参考文档
W3Schools - 包含丰富的示例和在线编辑器
菜鸟编程 - 讲解详细的宝藏网站