css块元素和行内元素

# css中的块元素和行内元素

“块级元素（block）”与“行内元素（inline）”是 CSS 布局的基础概念之一。理解它们的区别，对掌握布局（Flex / Grid / Flow）非常重要。我们来系统讲清楚👇

# 一、定义与核心区别

对比项	块级元素（Block）	行内元素（Inline）
表现形式	独占一行，从上到下排列	与其他元素在同一行内排列
默认宽度	自动填满父容器宽度	由内容撑开
可设置宽高	✅ 可以设置 `width` / `height`	❌ 一般无效（部分如 `<img>` 例外）
可设置 margin/padding	✅ 全部方向有效	⚠️ 仅左右有效（上下可能无效）
典型标签	`<div>`, `<p>`, `<section>`, `<header>`	`<span>`, `<a>`, `<em>`, `<strong>`
换行特性	自动换行	不会自动换行
排版特征	按块排列（Block Formatting Context）	按文本流排列（Inline Formatting Context）

# 二、块级元素示例

<div>我是块级元素A</div>
<div>我是块级元素B</div>

1
2

✅ 效果：

[我是块级元素A]
[我是块级元素B]

1
2

每个 <div> 独占一行。

# 三、行内元素示例

<span>我</span>
<span>是</span>
<span>行内元素</span>

1
2
3

✅ 效果：

我是行内元素

所有 <span> 会并排显示在一行内。

# 四、可切换的显示类型

CSS 的 display 属性可以让元素在块级与行内之间切换：

属性值	说明
`display: block`	元素变成块级
`display: inline`	元素变成行内
`display: inline-block`	✅ 混合型：不独占一行，可设置宽高
`display: none`	隐藏元素
`display: flex / grid`	变为容器类型（新的布局模型）

# 🔸 示例：

span {
  display: block; /* 让行内元素表现为块级 */
}
div {
  display: inline-block; /* 让块元素并排显示 */
}

1
2
3
4
5
6

# 五、`inline-block`：行内与块的结合

inline-block 元素：

不独占一行；
可以设置 width、height；
常用于按钮、标签、菜单项等。

示例：

<span class="btn">按钮A</span>
<span class="btn">按钮B</span>

1
2

.btn {
  display: inline-block;
  padding: 8px 16px;
  background: #42b983;
  color: #fff;
  border-radius: 4px;
}

1
2
3
4
5
6
7

✅ 效果：

按钮A 按钮B（并排显示，且可设置宽高）

# 六、块级与行内盒模型差异

项目	块级元素	行内元素
`width`/`height`	生效	不生效（由内容撑开）
`margin`/`padding`	上下左右都生效	上下不完全生效（受字体影响）
`line-height`	控制整行高度	控制文字行距
`vertical-align`	无效	✅ 有效（控制基线对齐）

# 七、面试常见问题总结

Q1️⃣：块级元素和行内元素的区别？块级元素独占一行、可设置宽高、上下 margin 有效；行内元素不换行、宽高由内容决定、上下 margin 无效。

Q2️⃣：如何让行内元素设置宽高？改为 display: inline-block 或 display: block。

Q3️⃣：行内元素之间有空隙，为什么？因为 HTML 的空格会被渲染为文字间距，可以通过移除空格或设置 font-size: 0 解决。

Q4️⃣：为什么块级元素会换行？因为在正常流（Normal Flow）中，块级盒子默认按文档流垂直堆叠。

# 八、常见的块元素和行内元素

块级元素列表
<address>    定义地址    
<caption>    定义表格标题    
<dd>    定义列表中定义条目    
<div>    定义文档中的分区或节    
<dl>    定义列表    
<dt>    定义列表中的项目    
<fieldset>    定义一个框架集    
<form>    创建 HTML 表单    
<h1>    定义最大的标题    
<h2>    定义副标题    
<h3>    定义标题    
<h4>    定义标题    
<h5>    定义标题    
<h6>    定义最小的标题    
<hr>    创建一条水平线    
<legend>    元素为 fieldset 元素定义标题    
<li>    标签定义列表项目    
<noframes>   为那些不支持框架的浏览器显示文本，于 frameset 元素内部    
<noscript>    定义在脚本未被执行时的替代内容    
<ol>    定义有序列表    
<ul>    定义无序列表    
<p>    标签定义段落    
<pre>    定义预格式化的文本    
<table>    标签定义 HTML 表格    
<tbody>    标签表格主体（正文）    
<td>    表格中的标准单元格    
<tfoot>    定义表格的页脚（脚注或表注）    
<th>    定义表头单元格    
<thead>    标签定义表格的表头    
<tr>    定义表格中的行    
行内元素列表
<a>    标签可定义锚    
<abbr>    表示一个缩写形式    
<acronym>    定义只取首字母缩写    
<b>    字体加粗    
<bdo>    可覆盖默认的文本方向    
<big>    大号字体加粗    
    换行    
<cite>    引用进行定义    
<code>    定义计算机代码文本    
<dfn>    定义一个定义项目    
<em>    定义为强调的内容    
<i>    斜体文本效果    
<img>    向网页中嵌入一幅图像    
<input>    输入框    
<kbd>    定义键盘文本    
<label>    标签为 input 元素定义标注（标记）    
<q>    定义短的引用    
<samp>    定义样本文本    
<select>    创建单选或多选菜单    
<small>    呈现小号字体效果    
<span>    组合文档中的行内元素    
<strong>    语气更强的强调的内容    
<sub>    定义下标文本    
<sup>    定义上标文本    
<textarea>    多行的文本输入控件    
<tt>    打字机或者等宽的文本效果    
<var>    定义变量    
可变元素素列表--可变元素为根据上下文语境决定该元素为块元素或者内联元素
<button>    按钮    
<del>    定义文档中已被删除的文本    
<iframe>    创建包含另外一个文档的内联框架（即行内框架）    
<ins>    标签定义已经被插入文档中的文本    
<map>    客户端图像映射（即热区）    
<object>    object对象    
<script>    客户端脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

# BFC布局

BFC（Block Formatting Context，块格式化上下文）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

1、BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响；
2、可以通过一些条件触发BFC，从而实现布局上的需求或解决一些问题；
3、可以将BFC想象成一个工具，无需探究其定义，只要着重理解其功能（特性）即可。

# BFC的触发条件

1、根元素（<html>）
2、float值非none 3、overflow值非visible 4、display值为inline-block、table-cell、table-caption、flex、inline-flex 5、position值为absolute、fixed

# BFC的特性

1、属于同一个BFC的两个相邻容器的上下margin会重叠（重点）
2、计算BFC高度时浮动元素也参于计算（重点）
3、BFC的区域不会与浮动容器发生重叠（重点）
4、BFC内的容器在垂直方向依次排列
5、元素的margin-left与其包含块的border-left相接触
6、BFC是独立容器，容器内部元素不会影响容器外部元素

# IFC布局规则

Inline Formatting Contexts，也就是“内联格式化上下文”。

子元素水平方向横向排列，并且垂直方向起点为元素顶部。
子元素只会计算横向样式空间，【padding、border、margin】，垂直方向样式空间不会被计算，【padding、border、margin】。
在垂直方向上，子元素会以不同形式来对齐（vertical-align）
能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和与其中的浮动来决定。
IFC中的“line box”一般左右边贴紧其包含块，但float元素会优先排列。
IFC中的“line box”高度由 CSS 行高计算规则来确定，同个IFC下的多个line box高度可能会不同。
当 inline-level boxes的总宽度少于包含它们的line box时，其水平渲染规则由 text-align 属性值来决定。
当一个“inline box”超过父元素的宽度时，它会被分割成多个boxes，这些 oxes 分布在多个“line box”中。如果子元素未设置强制换行的情况下，“inline box”将不可被分割，将会溢出父元素。

利用IFC还可以做很多其他的事情，例如：解决元素垂直居中、多个文本元素行高不一致排列混乱。

上次更新: 2025/11/25, 03:24:47

← CSS教程和技巧收藏盒子模型→

css块元素和行内元素

# css中的块元素和行内元素

# 一、定义与核心区别

# 二、块级元素示例

# 三、行内元素示例

# 四、可切换的显示类型

# 🔸 示例：

# 五、inline-block：行内与块的结合

# 六、块级与行内盒模型差异

# 七、面试常见问题总结

# 八、常见的块元素和行内元素

# BFC布局

# BFC的触发条件

# BFC的特性

# IFC布局规则

# 五、`inline-block`：行内与块的结合