固定宽度元素在百分比容器中保持自身尺寸，不随父容器缩放；若父容器过窄则溢出，推荐用max-width+width:100%或calc()实现弹性布局，并统一box-sizing:border-box。
固定宽度元素在百分比容器里会怎样
当一个 width: 200px 的盒子放在 width: 80% 的父容器中，它不会被拉伸或压缩——固定宽度优先级高于百分比。但若父容器实际宽度小于 200px，就会触发水平溢出，滚动条出现或内容被裁剪（取决于 overflow 设置）。
- 浏览器按层叠顺序计算：先算父容器的百分比宽度（基于其包含块），再渲染子元素的固定宽度
- 固定宽元素不参与父容器的“剩余空间分配”，哪怕父容器用了
display: flex - 移动端尤其危险：
80%在小屏可能只有 300px，而200px的侧边栏直接撑满，主内容被挤到下方
用 max-width 替代 width 实现弹性约束
想让一个“通常固定、必要时收缩”的区域存在，max-width 比 width 更合适。它保留设计意图，又允许响应式退让。
aside {
max-width: 240px;
width: 100%; /* 先占满可用空间 */
flex-shrink: 0; /* 防止 Flex 容器里被压缩过头 */
}
-
width: 100%让它能随父容器缩放，max-width设定上限 - 配合
flex-shrink: 0可避免在flex布局中被强制压缩（尤其 Safari 对max-width处理较弱） - 慎用
min-width：设成200px后，在窄屏上反而更容易溢出
calc() 混合单位做精准留白
常见需求：左侧固定 240px 导航栏，右侧主内容占满剩余空间。不用 JS、不依赖 Flex/Grid 也能实现，靠 calc()。
.main-content {
width: calc(100% - 240px);
margin-left: 240px;
}
- 注意空格：
calc(100%-240px)会失效，必须写成calc(100% - 240px) - IE10+ 支持，但 IE11 对嵌套
calc()（如calc(calc(100% - 20px) - 240px)）有 bug - 如果导航栏有
border或padding，记得把它们加进减数里，比如calc(100% - 240px - 2px)
固定 + 百分比混合布局最容易被忽略的点
不是数值怎么写的问题，而是盒模型和重排逻辑没对齐。比如给一个 width: 30% 的列加了 padding: 10px，它实际占位就超过 30%，旁边列会被挤换行——除非你开了 box-sizing: border-box。
- 所有参与百分比计算的元素，务必统一设
box-sizing: border-box - 固定宽度组件（如广告 banner）放进流式网格时，用
flex-basis替代width，更易控制行为 - 媒体查询里改的是“触发条件”，不是“修复手段”：别等布局崩了才加
@media (max-width: 768px)，而要在设计阶段就定义好各断点下固定/流式的切换阈值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
