width: auto 和 width: 100% 的本质差异在于计算基准：前者按父 content width 反推子 content width（自动减去 padding/border/margin），天然防溢出；后者直接取父 content width 为基准，子元素的 padding/border/margin 额外叠加，易导致溢出。
width: auto 和 width: 100% 的差异，本质是浏览器计算「内容区宽度」时是否把父容器的 padding/border 算进去 —— 不是“要不要填满”，而是“以谁的宽度为基准来减”。
width: 100% 按父元素 content width 计算
它只看父元素的 content area 宽度（即 width 值），不关心父元素有没有 padding 或 border。子元素自己的 padding、border、margin 全部额外叠加，极易溢出。
- 父元素设了
padding: 20px，子元素width: 100%+padding: 10px→ 实际总宽 = 父content width+ 20px（子左右内边距） - 若父元素
box-sizing: content-box（默认），且自身还有border，那子元素更可能撑破父容器 - 即使父元素
width: 300px，只要子元素加了padding: 10px+border: 2px，总宽就是300px + 24px，横向滚动条就来了
width: auto 按父元素可用空间反推 content width
它不直接指定数值，而是让浏览器解这个等式：margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素 content width（对常规块级流内元素）。
- 子元素加了
padding: 10px，width就自动少 20px；加了margin: 5px，width再少 10px - 所以它天然防溢出，但代价是：内容少时不会“撑满”，比如空
<div></div>+width: auto只占一行高，几乎看不见 - 浮动元素或绝对定位元素下，
width: auto行为会变 —— 浮动时收缩到内容最小宽，绝对定位时可能依赖left/right推算
box-sizing: border-box 能缓解但不能消除区别
很多人以为加了 box-sizing: border-box 就能让 width: 100% 和 width: auto 表现一致，其实只是掩盖了部分问题。
-
box-sizing: border-box把padding和border算进width里，所以width: 100%+padding: 10px不再溢出（前提是父容器没额外padding） - 但它不处理
margin—— 子元素margin: 10px依然会让整体超出父容器边界 -
width: auto在border-box下仍按等式反推，只是等式右边多了一层约束，行为更可预测
什么时候必须用 width: 100%，什么时候该信 width: auto
别凭直觉选，看控制权在谁手上：
- 要子元素**严格对齐父元素左右边缘**（比如全宽背景色块、表单输入框拉满），用
width: 100%，但务必搭配box-sizing: border-box+ 显式清掉margin - 要子元素**不破坏父容器布局，且内容长度不确定**（比如卡片内文字区域、响应式侧边栏里的按钮组），优先用
width: auto - 当父元素是
display: flex或display: grid容器时，width属性本身常被忽略 —— 此时纠结auto还是100%没意义，该看flex-basis或grid-column
最常被忽略的一点：width: auto 的“自动”不是万能的 —— 它只在标准文档流中按盒模型等式工作；一旦元素脱离流（float/absolute/fixed）、或父容器是弹性/网格布局，它的计算逻辑就完全变了。这时候硬套“auto=安全”，反而更容易出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
