块级元素未设width时默认宽度为父容器content-box宽度减去左右padding和border，强制填满可用水平空间；加padding后因box-sizing:content-box导致溢出；浮动或绝对定位会使其width由内容决定。
div、p、h1这类块级元素不设置 width，默认宽度就是父容器的 100%，不是“撑开”或“自适应内容”，而是**强制填满可用水平空间**——这是块级元素的本质行为，不是 CSS “计算”出来的结果。
块级元素未设 width 时的宽度来源
它不看内容多长，也不依赖 box-sizing，只认父级的可用宽度（即父元素的 content-box 宽度减去左右 padding 和 border）。常见误解是“它被内容撑开”，其实错在混淆了高度和宽度：
- 高度确实由内容撑开（除非显式设了
height） - 宽度则是“继承式占满”：父宽 300px → 子
div宽也是 300px，哪怕里面只有一行文字 - 如果父元素用了
flex或grid布局，这个“100%”会被容器规则覆盖，不再是简单继承
为什么加 padding 后内容看起来“溢出”了
因为默认 box-sizing: content-box，width: auto 的块级元素，其总占用宽度 = width + padding + border。而它的 width 部分仍是父宽，所以 padding 是额外加上的：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
/* 父容器宽 400px */
.parent { width: 400px; }
.child { padding: 20px; background: #eee; }
/* .child 实际占据宽度 = 400px + 40px = 440px → 溢出 */
解决办法只有两个：
- 显式写
box-sizing: border-box，让padding包含在 400px 内 - 或者改用
max-width: 100%+box-sizing: border-box组合，更稳妥
浮动或绝对定位后 width 行为突变
一旦给块级元素加了 float: left 或 position: absolute，它就脱离文档流，width: auto 的含义立刻变成“由内容宽度决定”，不再是填满父容器：
-
<div style="float:left">hello</div>→ 宽度≈50px（文字本身宽度） -
<div style="position:absolute">hello</div>→ 同样收缩，除非父元素有position: relative且你设了left/right - 这时候想让它保持“填满父宽”，必须显式写
width: 100%，但要注意：100% 是相对于包含块（containing block），不是视觉父元素
真正容易被忽略的点是：块级元素的“默认宽度”不是 CSS 层面的“自动计算值”，而是渲染引擎对块格式化上下文（BFC）的硬性规则。换言之，你没法靠 min-width 或 fit-content 覆盖它——除非先把它变成非块级（比如 display: inline-block），那行为就全变了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
