很多初学html的小伙伴，分不清块级元素和行内元素，今天咱们一次说个够！下图就是块级元素和行内元素的区别，还看不懂，那接着往下看吧！
在HTML中，元素根据其默认布局行为分为块级元素（Block Elements）和行内元素（Inline Elements）还有个行内块级元素。这几种类型的元素在页面中占据不同的空间，遵循不同的排版规则。以下是详细分析：
一、块级元素（Block Elements）
特性如下：
- 独占一行：无论内容多少，块级元素都会从新的一行开始显示，并占据整行宽度。
- 可设置宽高：可以通过CSS设置width、height、margin和padding属性。
- 默认宽度：若未设置宽度，默认会扩展至父元素的宽度。
- 可包含其他元素：通常用于构建页面的结构框架（如标题、段落、分区）。
常见块级元素
<div> <!-- 通用块容器 -->
<p> <!-- 段落 -->
<h1>~<h6> <!-- 标题 -->
<ul>、<ol>、<li> <!-- 列表 -->
<table> <!-- 表格 -->
<form> <!-- 表单 -->
header <!-- 头部区域 -->
footer <!-- 页脚区域 -->
main <!-- 主要内容 -->
section <!-- 章节 -->
article <!-- 独立内容 -->
nav <!-- 导航栏 -->示例
<div style="background-color: lightgray;">
<h1>这是标题</h1>
<p>这是段落内容。</p>
</div>上述代码中，<div>、<h1>和<p>都是块级元素，它们会垂直排列，每个元素占一行。
HTML新增的一些语义化标签，也是块级元素：
<article> 文章内容。
<aside> 伴随内容。
<audio> 音频播放。
<video> 视频。
<canvas> 绘制图形。
<header> 区段头或页头。
<hgroup> 标题组。
<section> 一个页面区段。
<footer> 区段尾或页尾。
<figcaption> 图文信息组标题。
<figure> 图文信息组。
<output> 表单输出。
还有一些不常用但很有意思的块级元素：
<noscript> 不支持脚本或禁用脚本时显示的内容。
<pre> 预格式化文本。
<address> 联系方式信息。
<blockquote> 块引用。
<dd> 定义列表中定义条目描述。
<dl> 定义列表。
<fieldset> 表单元素分组。
<tfoot> 表脚注。
二、行内元素（Inline Elements）
特性如下：
- 不换行：行内元素会在同一行内显示，直到空间不足才会换行。
- 宽度由内容决定：无法通过CSS设置固定的width和height（由内容撑开）。
- 水平方向布局：只能设置水平方向的margin和padding（如margin-left），垂直方向无效。
- 通常嵌套在块级元素中：用于包裹文本、链接或小图标等。
常见行内元素
<a> <!-- 超链接 -->
<img> <!-- 图像 -->
<input> <!-- 输入框 -->
<button> <!-- 按钮 -->
<label> <!-- 表单标签 -->
<span> <!-- 通用行内容器 -->
<br> <!-- 换行符 -->
<i>、<em>、<strong> <!-- 文本格式化 -->
<select> <!-- 下拉选择框 -->
<textarea> <!-- 多行文本框 -->示例
<p>这是一段包含 <a href="#">链接</a> 和 <strong>加粗文本</strong> 的段落。</p>上述代码中，<a>和<strong>是行内元素，它们会与文本在同一行内显示。
行内元素还有很多，如：big ， tt ， abbr ， acronym ， cite ， code ， label， dfn ， em ， kbd ， strong ， samp ， var ， bdo ， map ， object ， q ， script ， sub ， sup 。
三、关键区别对比
四、行内块级元素
行内块级元素（Inline-Block Element） 是 CSS 中 display: inline-block 属性值对应的元素类型。它结合了行内元素（Inline）和块级元素（Block）的特性，常用于需要水平排列但同时又需要控制尺寸的场景。
核心特性：
- 水平排列：像行内元素（如 <span>）一样，多个行内块级元素会默认从左到右水平排列，不换行。
- 支持宽高和边距：像块级元素（如 <div>）一样，可以设置 width、height、margin、padding 等属性，且会实际生效。
- 不独占一行：不会像块级元素那样强制换行，而是与其他行内元素或行内块级元素共享一行。
对比其他元素类型：
代码示例
<style>
.inline-block-example {
display: inline-block;
width: 100px;
height: 50px;
margin: 10px;
padding: 5px;
background-color: lightblue;
}
</style>
<div class="inline-block-example">元素1</div>
<div class="inline-block-example">元素2</div>
<div class="inline-block-example">元素3</div>效果：
- 三个 <div> 水平排列（默认块级元素会换行，但 inline-block 后不会）。
- 每个元素的宽高、边距生效。
注意事项
元素间空白间隙
多个 inline-block 元素间可能有默认空格（由 HTML 代码中的换行符导致）。
解决方法：父容器设置 font-size: 0，或删除 HTML 标签间的空格。
垂直对齐问题
默认基线对齐可能导致元素未对齐。
解决方法：设置 vertical-align: top/middle。
兼容性
现代浏览器普遍支持，但在旧版本 IE 中需注意兼容性（如触发 hasLayout）。
总结来说，行内块级元素是布局中灵活的工具，特别适合需要水平排列但需精确控制尺寸的场景。
五、特殊元素说明
1. <img> 和 <input>
虽然是行内元素，但可设置宽高（属于替换元素，行为类似块级元素）。
2. <br> 和 <wbr>
<br>：强制换行（行内元素）。
<wbr>：可选换行点（允许文本在特定位置换行）。
3. <div> 和 <span>
<div>：块级容器，用于分组内容。
<span>：行内容器，用于样式化文本（如颜色、字体）。
六、CSS对显示模式的修改
通过CSS的display属性，可以改变元素的默认显示模式：
- display: block：将元素转为块级元素（如<a>转为块级链接）。
- display: inline：将元素转为行内元素（如<div>转为行内容器）。
- display: inline-block：混合模式，元素保持行内布局，但可设置宽高（如按钮组）。
- display: none：隐藏元素（不占用空间）。
示例
<style>
/* 将行内元素<a>转为块级元素 */
a.block-link {
display: block;
width: 200px;
margin-bottom: 10px;
}
/* 将块级元素<div>转为行内元素 */
div.inline-div {
display: inline;
background-color: lightblue;
}
</style>
<a href="#" class="block-link">块级链接</a>
<div class="inline-div">行内div</div>七、最佳实践
1. 遵循语义化
使用正确的元素类型（如用<p>包裹文本，而非多个<div>）。
2. 避免行内元素嵌套块级元素
例如，不要在<a>中直接嵌套<div>，可能导致布局异常。
3. 合理使用display属性
需要改变元素默认行为时，优先使用display: inline-block而非浮动或定位。
4. 注意替换元素的特殊性
<img>、<input>等替换元素的盒模型与普通行内元素不同。
八、常见误区
1. 认为块级元素一定比行内元素“大”
块级元素的宽度默认是父元素的100%，但可以通过CSS缩小（如width: 50%）。
2. 混淆视觉效果与元素类型
元素的显示模式（块级/行内）与视觉上的大小无关，而是由其布局行为决定。
3. 滥用<div>和<span>
优先使用语义化元素（如<nav>、<article>），而非无意义的容器。
九、总结
理解块级元素和行内元素的区别是掌握HTML布局的基础。块级元素适合构建页面框架，而行内元素适合处理文本和小型交互。通过CSS的display属性，可以灵活调整元素的显示模式，实现更复杂的布局需求。在实际开发中，应优先遵循语义化原则，选择合适的元素类型。