div默认display:block，独占一行且宽度自动撑满父容器；span默认display:inline，不换行且宽度由内容决定；块级元素的width:auto严格按“父容器宽度减去margin/border/padding”计算。
块级元素默认独占一行，且宽度自动撑满父容器——这是文档流里最常被误用却最不该忽略的底层规则。
为什么 div 一写就换行，而 span 不会？
这不是“语法规定”，而是浏览器渲染时对元素默认 display 值的执行结果：div 默认是 display: block，span 默认是 display: inline。块级元素在文档流中必须从新行开始，并占据整行可用宽度；行内元素则像文字一样“嵌入”当前行，只占内容所需空间。
- 即使你给
span设置了width: 200px，它也不会生效——这是标准行为，不是 bug - 把
span改成display: inline-block后，宽高才起作用，但它仍和其他行内元素共处一行 -
block元素的margin-top和margin-bottom会真实影响上下间距；inline元素的这两个值则被忽略
width: auto 在块级元素里到底怎么算？
当块级元素没设 width，它的宽度不是“随便取”，而是严格等于：父容器宽度 − 左右 padding − 左右 border − 左右 margin（如果这些值都为 0，则正好填满父容器）。
- 一旦你加了
padding-left: 20px，又没改box-sizing，那内容区宽度就会自动收缩 20px，而不是整体变宽 - 想让
width: 100%+padding不挤内容？加一句box-sizing: border-box -
margin: auto水平居中只对块级元素有效，且前提是它有明确的width（否则 auto 宽度下左右 margin 都为 0）
脱离文档流后，块级元素还“块”吗？
不“块”了——至少在文档流意义上不“块”了。一旦用了 position: absolute 或 float: left，该元素就从正常流中抽离，不再参与父容器高度计算，也不再强制换行。
-
position: absolute的元素完全无视父容器的display类型，它只认最近的定位上下文（position: relative/absolute/fixed祖先） -
float元素虽能横向排列，但父容器会塌陷（高度变为 0），除非用clear或overflow: hidden触发 BFC - 脱离流的元素，即使原本是
div，也失去“独占一行”的文档流特性——它可能和文字混排、被其他元素覆盖，甚至溢出容器也不触发滚动
真正容易被忽略的，不是“块级元素占一行”，而是“它占的这一行，是由父容器的 width 和自身的 margin/padding/border 共同切割出来的”。很多布局问题，根源不在写法错，而在没意识到这个计算过程是自动发生的、且不可跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
