元素总宽度取决于box-sizing：content-box时为width+padding+border+margin，border-box时为width+margin；calc()易漏父padding、border及transform缩放影响；绝对定位的100%参照最近已定位祖先；flex中flex-basis优先于width。
总宽度计算公式取决于 box-sizing 值
默认情况下（box-sizing: content-box），元素的总宽度 = width + 左右 padding + 左右 border + 左右 margin；而设为 box-sizing: border-box 后，width 已包含 padding 和 border，此时总宽度 = width + 左右 margin。很多人以为加了 padding 就“只是内边距”，结果发现容器撑开了——其实是没意识到 content-box 下它会额外加进总宽里。
用 calc() 动态减去不可控部分时容易漏掉什么
常见写法如 width: calc(100% - 40px) 看似合理，但实际常漏掉：父容器的 padding、子元素自身的 border、甚至祖先的 transform: scale() 导致百分比基准被缩放。例如父容器有 padding: 12px，那 100% 是指父内容区宽度，不是整个父盒；若还加了 border: 2px，就得再减 4px 才准。
- 只减
margin，忘了padding和border也在占用空间 - 在
flex或grid容器中，100%可能参考的是 flex item 的主轴可用宽度，而非父容器 width - 用了
transform: scale(0.8)的祖先，子元素calc(100% - X)的 100% 是缩放后的尺寸，不是视觉所见的原始宽度
多层定位下 width: 100% 失效的根本原因
绝对定位元素的 width: 100% 不是相对于 body，而是相对于最近的已定位祖先（position: relative/absolute/fixed/sticky）。如果那个祖先没显式设 width，或被 flex/grid 自动收缩，它的 offsetWidth 就可能远小于预期，导致子元素“算出来很宽，看起来却窄”。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 用 DevTools 的「Computed」面板检查该祖先的
width和offsetWidth是否一致 - 避免同时设置
left、right和width—— 浏览器会优先按left+right计算宽度，width反而被忽略或引发冲突 - 临时加
outline: 1px solid red到各级父级，直观确认谁真占了空间
flex-basis 和 width 共存时谁说了算
在 Flex 布局中，只要 flex-basis 不是 auto，width 就完全不参与主轴尺寸计算。比如 flex-basis: 120px + width: 200px，最终初始尺寸就是 120px；只有 flex-basis: auto 时，才 fallback 到 width 值，且还要和内容自然宽度比较取大者。更隐蔽的是：min-width: auto（浏览器默认）会让文字撑开 flex-basis: 0，必须显式写 min-width: 0 才能真正“从零开始分配”。
真正难的不是记住公式，而是每次改一个 padding 或加一层 position，都要重新判断这个元素此刻的“100%”到底参照谁、是否被裁剪、有没有 transform 干扰测量——这些细节不会报错，但会让布局悄悄偏移几像素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
