直接通过浏览器开发者工具查看元素实际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></p>、<div>） <li>给它加 <code>style="width:200px; height:50px;"，尺寸变了吗？→ 没变 → 很可能是行内（如 <span></span>、<a></a>）
• 给它加 style="margin-top:20px;"，上面的元素被顶开了吗？→ 没顶开 → 很可能是行内（margin-top 对 <span></span> 无效）

这三个问题比查列表快得多，而且直指布局表现本质。


html-deploy
使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
下载

常见踩坑：行内元素里塞 <div> 或强行设高宽 <p>HTML 规范明确限制：行内元素（如 <code><span></span>、<p></p> 内部）不能直接包含块级元素。浏览器会默默纠错（比如把 <div> 挪到 <code><p></p> 外），但结构已错乱。

• 错误写法：<p>文字</p> <div>这不行</div>
• 正确做法：要么改容器为 <div>，要么把子元素也改成行内（如用 <code><span></span>）
• 另一个高频错误：给 <span></span> 加 height 还纳闷为啥没反应 → 它默认是 inline，得先 display: inline-block 或 block

真正要动手改的，只有 display 这一个 CSS 属性

所谓“掌握块/行内”，核心不是记住几十个标签分类，而是熟练切换 display 值来达成目标布局。比如：

• 想让几个 <li> 横着排？不改 HTML，加 display: inline-block 就行
• 想让 <a></a> 能点的区域变大？加 display: inline-block + padding
• 想让一段文字居中且背景色铺满整行？用 <div> 包，别硬套 <code><span></span> 然后调 display

  所有“奇怪的布局失效”，八成出在 display 类型和父容器约束的配合上——而不是你漏写了哪个标签。