必须全局设置 box-sizing: border-box，否则 width: 100% 遇 padding/border 必溢出；需包含 ::before、::after，第三方组件可显式覆盖，禁在媒体查询中切换，用 DevTools Layout 面板验证。
必须全局设置 box-sizing: border-box
不设 box-sizing: border-box，用 width: 100% 或 flex-basis 做响应式就是埋雷。默认 content-box 下，width: 100% 加上 padding 或 border 必然溢出容器——这是小屏错位、换行、横向滚动条的最常见原因。
正确写法是：
*, *::before, *::after {
box-sizing: border-box;
}
漏掉 *::before 和 *::after 会出问题：比如用伪元素画装饰边框或三角形时，尺寸仍按 content-box 计算，视觉失控。
- 第三方组件（如某些
textarea或 UI 库输入框）若行为异常，可显式覆盖：.legacy-input { box-sizing: content-box; } - 别在媒体查询里反复切换
box-sizing—— 它不是响应式开关，而是基础计算规则 - 用 Chrome DevTools 的“Layout”面板检查元素实际尺寸，验证是否真被
border-box纳入
用 padding 控制内容呼吸感，margin 管理模块间距
padding 百分比基于父宽计算（包括 padding-top），适合做等比缩放留白；margin 百分比同样基于父宽，但垂直方向易触发外边距合并（margin-collapse），尤其在断点切换时导致“间距突然变小”或布局塌陷。
现代商业数字化服务公司网站模板
下载
现代商业数字化服务公司网站模板是一款提供数字营销、品牌包装、内容创作和网页设计等数字化商业服务公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
立即学习“前端免费学习笔记（深入）”；
- 小屏慎用大
margin-left/margin-right配合width: 100%，极易水平溢出 - 卡片、按钮等内部留白优先用
padding；子项间距改用gap（display: flex或grid下），它不合并、不影响盒模型尺寸 - 响应式内边距推荐
padding-inline: clamp(8px, 4vw, 24px)，最小保底、上限可控、兼容 RTL
避免 padding 和 margin 触发重排
修改 padding 或 margin 会直接触发浏览器重排（reflow），滚动或动画中频繁改动会导致明显卡顿。
- 需要位移效果时，优先用
transform: translate()替代margin-top等 - JS 若依赖
offsetWidth/offsetHeight做后续计算，记得放在requestAnimationFrame中读取 - 媒体查询中改
padding/margin是安全的，因只在断点触发，不连续执行 - 别在
flex容器子项上同时用margin和gap，后者更可控且不触发重排
移动端点击区域不足的盒模型根源
PC 上 padding: 8px 看似够用，但手指触控面积远大于光标。若没用 box-sizing: border-box，再叠加 line-height 不匹配，真实可点高度可能低于 44px 标准。
- 强制保底：
min-height: 44px直接作用于a或button - 垂直居中用
line-height: 44px（与min-height一致），比靠padding更可控 - 左右留白用
padding: 0 16px，避免文字贴边 - 关键验证：用 Chrome DevTools “Toggle device toolbar” 的真机模式测，别信模拟器像素值
最容易忽略的是：box-sizing 必须从项目初始化就统一，不能部分组件用 border-box、部分用 content-box；否则动态调整 padding 时，不同元素的实际占用宽度不一致，响应式断点必然错位。
