直接通过浏览器开发者工具查看元素实际display值比死记标签分类更有效，重点关注block（独占一行）、inline（并排且宽高无效）、inline-block（并排且宽高/上下margin有效）三类行为。
别从“概念定义”开始学——直接看浏览器里元素怎么排，比背分类表管用十倍。
打开开发者工具，一眼看出 display 类型
右键页面任意元素 → “检查”，在右侧 Computed 面板里搜 display，值就是它当前的显示类型。注意：这个值可能被 CSS 覆盖，不是 HTML 默认值，但对实际布局起效的就是它。
-
display: block→ 元素独占一行，width/height有效，上下margin生效 -
display: inline→ 多个并排，width/height设置无效，上下margin不推其他元素 -
display: inline-block→ 并排 + 可设宽高 + 上下margin生效（比如<img>和<input>默认就是它）
别死记哪些标签是块/行内，先盯住三个典型行为
遇到一个标签拿不准？只问自己三句：
- 它后面的内容自动换行了吗？→ 是 → 很可能是块级（如
<p>、<div>） - 给它加
style="width:200px; height:50px;"，尺寸变了吗？→ 没变 → 很可能是行内（如<span>、<a>） - 给它加
style="margin-top:20px;"，上面的元素被顶开了吗？→ 没顶开 → 很可能是行内（margin-top对<span>无效）
这三个问题比查列表快得多，而且直指布局表现本质。
立即学习“前端免费学习笔记（深入）”；
常见踩坑：行内元素里塞 <div> 或强行设高宽
HTML 规范明确限制：行内元素（如 <span>、<p> 内部）不能直接包含块级元素。浏览器会默默纠错（比如把 <div> 挪到 <p> 外），但结构已错乱。
- 错误写法：
<p>文字<div>这不行</div></p> - 正确做法：要么改容器为
<div>，要么把子元素也改成行内（如用<span>） - 另一个高频错误：给
<span>加height还纳闷为啥没反应 → 它默认是inline，得先display: inline-block或block
真正要动手改的，只有 display 这一个 CSS 属性
所谓“掌握块/行内”，核心不是记住几十个标签分类，而是熟练切换 display 值来达成目标布局。比如：
- 想让几个
<li>横着排？不改 HTML，加display: inline-block就行 - 想让
<a>能点的区域变大？加display: inline-block+padding - 想让一段文字居中且背景色铺满整行？用
<div>包，别硬套<span>然后调display
所有“奇怪的布局失效”，八成出在 display 类型和父容器约束的配合上——而不是你漏写了哪个标签。
