块级元素默认占满整行，是display: block触发CSS规范中width:auto的强制计算规则，即取包含块content box宽度（减去margin、border、padding），与内容是否为空无关。
display:block 的 width 计算不是“撑开”，而是强制取值
块级元素默认占满整行，不是因为内容多把它“顶”宽了，而是 display: block 触发了 CSS 规范中明确的自动宽度计算规则：当 width 未显式设置时，其计算值为 auto，此时浏览器会直接将它设为包含块的 content box 宽度（减去左右 margin、border、padding）。哪怕 <div></div> 是空的，这个行为也照常发生。
常见错误现象：
- 给空
<div>加背景色，却发现它“莫名其妙”铺满父容器——这不是渲染 bug，是规范行为 - 误以为
max-width: 100%能限制“默认占满”，其实它只在父容器足够宽时起作用；小屏下该值根本不会生效
为什么 margin: auto 水平居中能成立
margin: auto 在块级元素上实现水平居中，完全依赖于 “默认占满” 这一前提。它的原理是：当元素宽度确定（比如由 max-width 或显式 width 设定），左右 margin 同时为 auto 时，浏览器把剩余空间均分给左右外边距。
所以：
立即学习“前端免费学习笔记（深入）”；
- 如果没设
width或max-width，margin: auto实际上会让左右 margin 都变成 0 —— 因为没有“剩余空间”可分 - 真正起作用的是组合：
display: block+width（或max-width）+margin: auto -
margin: auto在行内元素或display: inline-block上无效，原因就是它们不满足“默认占满”这一基础条件
display 值切换会彻底改变盒模型行为
把 display: block 改成其他值，不是微调样式，而是切换整个布局参与方式：
-
display: inline：生成行内盒，width/height失效，垂直方向的margin和padding不影响流布局（仅视觉撑开背景） -
display: inline-block：保留尺寸控制能力，但受 HTML 中换行符/空格影响，可能产生意外间隙 -
display: flex或display: grid：父容器变成弹性或网格容器，子项不再“默认占整行”，而是由flex-direction或网格轨道决定排列 -
display: table：虽属块级盒，但宽度默认收缩至内容宽度，和block行为完全不同
容易被忽略的“占整行”失效场景
表面上看元素没占满，往往不是 display: block 失效，而是其他样式干扰了视觉或布局表现：
- 父容器设置了
overflow: hidden，而子元素有负margin或transform: translateX()，导致内容被裁剪，但盒本身仍按整行计算 - 用了
box-sizing: border-box后又写width: 100%，若父容器 padding 较大，子元素可能溢出或触发横向滚动条 - 浮动（
float: left）或绝对定位（position: absolute）让元素脱离文档流，此时“占整行”逻辑不再适用 —— 但这是主动脱离，不是block本身失效
真正关键的一点是：只要没脱离文档流、没改 display、没设固定 width，display: block 元素就一定按包含块宽度自动计算自身宽度——这个机制藏得深，但极其稳定。
