块级与行内元素入门教程

这篇文章颠覆了传统死记硬背HTML标签分类的学习方式，直击布局本质：真正决定元素行为的不是标签名，而是浏览器中实时生效的`display`计算值——只需三秒检查开发者工具，用“是否换行、宽高是否生效、上下margin是否起作用”三个实操问题，就能精准判断block、inline或inline-block行为；它强调所有布局问题几乎都源于display类型与父容器约束的错配，而解决之道往往仅需一行CSS：`display: inline-block`或`block`，既避开了行内元素嵌套块级元素等常见坑，又让按钮变大、文字横排、背景铺满等需求变得极其简单高效。

别从“概念定义”开始学——直接看浏览器里元素怎么排，比背分类表管用十倍。

打开开发者工具，一眼看出 display 类型

右键页面任意元素 → “检查”，在右侧 Computed 面板里搜 display，值就是它当前的显示类型。注意：这个值可能被 CSS 覆盖，不是 HTML 默认值，但对实际布局起效的就是它。

• display: block → 元素独占一行，width/height 有效，上下 margin 生效
• display: inline → 多个并排，width/height 设置无效，上下 margin 不推其他元素
• display: inline-block → 并排 + 可设宽高 + 上下 margin 生效（比如 和 <input> 默认就是它）

别死记哪些标签是块/行内，先盯住三个典型行为

遇到一个标签拿不准？只问自己三句：

• 它后面的内容自动换行了吗？→ 是 → 很可能是块级（如

  、

  ）
• 给它加 style="width:200px; height:50px;"，尺寸变了吗？→ 没变 → 很可能是行内（如 、）
• 给它加 style="margin-top:20px;"，上面的元素被顶开了吗？→ 没顶开 → 很可能是行内（margin-top 对 无效）

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