box-sizing: border-box 是响应式布局的起点，因默认 content-box 下 width: 100% 加 padding/border 必然溢出，导致小屏错位、换行或滚动条；推荐全局重置 , ::before, *::after { box-sizing: border-box; }，漏写伪元素会引发装饰内容尺寸失控。
box-sizing: border-box 是响应式布局的起点
不设 box-sizing: border-box，用百分比或 rem 做响应式就是给自己埋雷。默认的 content-box 会让 width: 100% 在加了 padding 或 border 后直接溢出容器——这是响应式页面在小屏上错位、换行、横向滚动的最常见原因。
推荐做法是全局重置：
*, *::before, *::after {
box-sizing: border-box;
}
注意：不要只写 * { box-sizing: border-box; }，漏掉伪元素会导致 ::before 或 ::after 生成的内容仍按 content-box 计算，比如用伪元素做装饰边框时尺寸失控。
- 个别需要标准行为的元素（如
<textarea></textarea>或某些第三方组件）可显式覆盖：.legacy-input { box-sizing: content-box; } - 不要在媒体查询里反复切换
box-sizing，它不是响应式开关，而是基础计算规则
padding 和 margin 的响应式取舍
padding 适合控制内容呼吸感，margin 适合控制模块间距；但在响应式中，它们的行为差异会放大问题：
-
padding百分比值基于父容器宽度计算（即使用于padding-top），适合做等比缩放的内边距（如维持 16:9 占位） -
margin百分比同样基于父宽，但垂直方向的margin-top/margin-bottom在块级流中可能触发外边距合并（margin-collapse），导致预期间距失效 - 小屏下慎用大
margin，尤其margin-left/margin-right配合width: 100%容易造成水平溢出
更稳妥的做法是：用 padding 控制卡片、按钮等内部留白；用 gap（配合 display: flex 或 grid）替代 margin 控制子项间距——gap 不会合并，也不影响盒模型尺寸计算。
外边距合并（margin collapse）在响应式中的真实影响
垂直相邻块级元素的 margin 合并，在响应式断点切换时极易引发“间距突然变小”或“布局塌陷”。比如：
.section { margin-bottom: 2rem; }
.article { margin-top: 1.5rem; }
/* 小屏下实际间距是 2rem，不是 3.5rem */
这不是 bug，是规范行为，但会让响应式调试变得不可预测。
- 避免依赖垂直
margin叠加：统一用margin-bottom，或改用flex/grid的gap - 父子间合并（如父元素无
border/padding，子元素margin-top会“冒泡”到父级）可用overflow: hidden或padding: 0.01px破坏 BFC 触发条件 - 媒体查询中修改
margin值时，务必检查是否因合并导致实际效果被抵消
calc() 与盒模型的协同使用
calc() 能把固定值和相对值混合运算，但它对盒模型的参与是“静态”的——它只影响 width、height、padding 等属性的最终数值，不改变盒模型类型或合并规则。
典型用法：
.sidebar {
width: calc(100% - 240px); /* 主内容区留出固定侧边栏宽度 */
}
.card {
padding: calc(1rem + 2vmin); /* 小屏缩放，大屏保底 */
}
-
calc()内部运算符两侧必须有空格，calc(100%-240px)会失效 - 避免嵌套
calc(calc(...))，可读性差且部分旧浏览器不支持 - 当
calc()用于width且元素含padding时，仍需box-sizing: border-box才能保证总宽可控
真正难的是动态场景：比如一个带边框的卡片在不同断点下既要保持视觉比例，又要适配文字流长。这时候不能只靠盒模型属性堆叠，得结合 aspect-ratio、clamp() 和容器查询（@container）——盒模型只是基础，不是万能解药。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
