块级元素独占一行、撑满父宽、触发bfc、支持完整盒模型；行内元素不换行、宽高由内容决定、仅左右margin生效、不可嵌套块级（a除外）；input/img为inline-block，兼具二者特性但存在4px间隙。
块级标签和行内标签在 HTML 文档流中行为根本不同，不是“能不能换行”的问题，而是“浏览器如何计算布局空间、如何响应 CSS、如何嵌套”的底层规则差异。
块级元素默认独占一行且撑满父容器宽度
块级元素（如 div、p、h1）在渲染时会自动触发“块格式化上下文（BFC）”的边界，导致前后元素强制换行；其 width 默认为 auto，实际计算值等于父容器内容区宽度减去左右 margin、padding 和 border。
-
margin-top和margin-bottom会真实影响垂直间距，且可能发生外边距合并（margin collapse） - 可以嵌套任意块级或行内元素（但
p、h1等文本类块级元素不能直接包含div） - 设置
height有效；若内容超出，会按overflow规则处理
行内元素不生成新行，宽高由内容决定
行内元素（如 span、a、strong）不会打断当前行框（line box），它们的尺寸完全由字体度量、字符宽度和行高决定；CSS 中设置 width 或 height 被忽略，margin-top/margin-bottom 也不产生位移效果。
- 仅
margin-left和margin-right生效，padding的上下部分会“撑开”行高，但不改变元素自身高度 - 不能直接包含块级元素（
a是例外，HTML5 允许它包裹块级内容，但语义上需谨慎） - 多个相邻行内元素之间的空白符（空格、换行）会被浏览器合并为一个空格，影响视觉间距
input 和 img 是行内块，不是纯行内
很多人误以为 input 是行内元素，其实它是默认 display: inline-block 的可替换元素（replaced element）。这意味着它既像行内元素一样可以和其他元素并排，又像块级元素一样能设置 width、height、margin、padding 所有方向都生效。
- 它天然存在“行内间隙”：同一行多个
input之间会出现约 4px 的空白，源于 HTML 解析器将换行/空格当作文本节点处理 - 解决间隙常用方法：父容器设
font-size: 0，再给input单独设字体；或用vertical-align: top/middle/bottom对齐 - 它不能被
line-height垂直居中（除非配合vertical-align），这点和纯行内元素不同
真正容易被忽略的是嵌套限制和外边距合并——比如两个 p 标签上下外边距会塌陷成一个最大值，而 span 套在 p 里时，它的 margin 不会影响段落整体位置。这些细节不写进 CSS 就不会暴露，但一旦布局错乱，根源往往就在这里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
