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>✅ 效果：
[我是块级元素A]
[我是块级元素B]每个 <div> 独占一行。
三、行内元素示例
<span>我</span>
<span>是</span>
<span>行内元素</span>✅ 效果：
我是行内元素所有 <span> 会并排显示在一行内。
四、可切换的显示类型
CSS 的 display 属性可以让元素在 块级 与 行内 之间切换：
| 属性值 | 说明 |
|---|---|
display: block | 元素变成块级 |
display: inline | 元素变成行内 |
display: inline-block | ✅ 混合型：不独占一行，可设置宽高 |
display: none | 隐藏元素 |
display: flex / grid | 变为容器类型（新的布局模型） |
🔸 示例：
span {
display: block; /* 让行内元素表现为块级 */
}
div {
display: inline-block; /* 让块元素并排显示 */
}五、inline-block：行内与块的结合
inline-block 元素：
- 不独占一行；
- 可以设置
width、height； - 常用于按钮、标签、菜单项等。
示例：
<span class="btn">按钮A</span>
<span class="btn">按钮B</span>.btn {
display: inline-block;
padding: 8px 16px;
background: #42b983;
color: #fff;
border-radius: 4px;
}✅ 效果：
按钮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> 客户端脚本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还可以做很多其他的事情，例如：解决元素垂直居中、多个文本元素行高不一致排列混乱。