块级元素默认占据整行宽度，因其display: block使width自动计算为包含块content box宽度，空div亦如此；max-width仅限制最大宽度，不改变block本质。
块级元素默认占据整行宽度，不是“看起来像”，而是 display: block 的渲染规则直接决定的——它强制元素生成一个块格式化上下文（BFC）级别的盒，该盒的 width 自动计算为包含块（containing block）的 content box 宽度。
display:block 的 width 计算逻辑
当元素的 display 值为 block 且未显式设置 width 时，浏览器会按 CSS 规范执行自动宽度计算：
- 若未设
width、min-width或max-width，则width计算值为auto，此时它会尽可能撑满包含块的可用宽度（减去 margin、border、padding） - 这个“撑满”是布局阶段的强制行为，与内容多少无关；哪怕
<div></div>是空的，它的盒依然占满父容器宽度 -
margin: auto在块级元素上水平居中生效，正是因为它依赖这个“默认占满”的前提：左右 margin 各分得剩余空间的一半
为什么设置 max-width 后不总占满整行
max-width 不会覆盖 display: block 的本质，但它会干预 width 的最终计算结果：
- 当包含块宽度 >
max-width值（如max-width: 600px），且无其他限制时，元素实际宽度取max-width值，不再随父容器拉伸 - 当包含块宽度 max-width（例如在小屏手机上视口只有 375px），元素宽度仍为包含块宽度 ——
max-width只设上限，不设下限 - 常见误用：
max-width: 100%+width: 100%组合，其实等价于只写width: 100%；而单独max-width: 100%在多数场景下无实际约束效果
display:block 与其他 display 值的关键区别
改变 display 值会彻底切换盒类型和参与的格式化上下文：
-
display: inline：生成行内盒，width/height 失效，垂直 margin/padding 不影响布局流（仅视觉上撑开背景） -
display: inline-block：生成行内级盒但保留块级盒的尺寸控制能力，可设 width/height，但会受换行符/空格影响产生间隙 -
display: flex或display: grid：脱离传统块流，父容器变成 flex/grid 容器，子项不再默认“占整行”，而是由容器的主轴方向和属性控制排列 - 注意：
display: table等也生成块级盒，但宽度计算规则不同（如默认收缩至内容宽度）
容易被忽略的边界情况
所谓“默认占整行”，在真实项目中常因以下原因失效或被掩盖：
- 父容器设置了
overflow: hidden或overflow: auto，而子块元素有负 margin 或 transform 平移，导致视觉上溢出，但布局上它仍按整行计算 - 使用了
box-sizing: border-box后，width: 100%包含 padding 和 border，若父容器没预留足够空间，可能触发横向滚动或内容挤压 - Flex 容器里的直接子元素即使设了
display: block，也不会“占整行”——因为它们已不参与块格式化上下文，而是 flex item - 某些重置样式库（如 normalize.css）会把
button、input等表单控件设为display: inline-block，这和它们原生的 UA 样式不一致，容易造成误解
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
