fixed元素width默认不是100%因其脱离文档流后采用shrink-to-fit行为，宽度仅包裹内容；规范定义其初始width为auto，在脱离流块级元素中即“内容最小宽度”。
为什么 fixed 元素的 width 默认不是 100%
因为 position: fixed 元素脱离文档流后，宽度默认采用 “shrink-to-fit” 行为——它只包裹内容本身，不继承父容器的 width: 100%，也不自动占满视口。这不是 bug，是规范定义：浏览器把它的初始宽度当作 auto，而 auto 在脱离流的块级元素上就等于“内容最小宽度”。
常见现象包括：
• 文字没换行、挤成一行还超长
• 空 <div></div> 宽度直接变成 0px
• 本该铺满的页头/弹窗只显示几个字宽
用 left: 0; right: 0; 比 width: 100% 更可靠
直接写 width: 100% 看似简单，但实际受多重干扰：
• 100% 是相对于**最近已定位祖先**（若无，则是视口），但视口宽度 ≠ 页面内容区宽度（尤其有滚动条时）
• iOS Safari 下 100vw 包含滚动条宽度，导致右侧溢出
• 缩放时百分比值被“冻结”，不再响应变化
而 left: 0; right: 0; 是定位拉伸，强制元素水平撑满其**包含块的可用空间**，且自动适配 box-sizing：
• 不依赖百分比计算，缩放下更稳定
• 即使父容器有 padding，只要它设了 position: relative，就能正确参照
• 和 top/bottom 组合可同时控制高度，无需额外设 height
必须同步处理 box-sizing 和边距
即使加了 left: 0; right: 0;，如果元素带 padding 或 border，仍可能溢出：
• 默认 box-sizing: content-box → width 只算内容区，padding 和 border 往外加
• 结果：总宽度 = right - left + 左右 padding + 左右 border > 视口宽度 → 出现水平滚动或右侧截断
所以务必加：
• box-sizing: border-box（让 padding/border 纳入宽度计算）
• 若需留白，改用 left: 15px; width: calc(100% - 30px);，而非靠 padding 推开
• 避免混用 width 和 left/right：二者冲突时，left/right 优先级更高
父容器没设 position:relative 就别指望 width:100% 对齐它
这是最常被忽略的前提：
• position: fixed 元素的 width: 100% 或 left: 0; right: 0;，永远参照的是**最近的已定位祖先**（即 position 值为 relative/absolute/fixed/sticky 的父级）
• 如果所有父级都是 static（默认），那它就直接相对于视口，和你的“父容器”完全无关
解决方法很简单：
• 给你真正想对齐的那个父容器加上 position: relative（哪怕不需要偏移）
• 这个声明不改变布局，但会把它变成“包含块”，让子 fixed 元素的定位和宽度计算有了明确锚点
• 注意：不要给 body 或 html 加 position: relative，除非你真想让它成为全站定位基准
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
