移动端 CSS 盒模型默认是 content-box；iOS Safari 和 Android Chrome 均与桌面端一致，width 仅含内容区，不包括 padding 和 border，易致布局溢出，故推荐全局设为 border-box。
移动端 CSS 盒模型默认是 content-box 还是 border-box？
移动端浏览器（包括 iOS Safari、Android Chrome）的默认盒模型和桌面端完全一致：box-sizing 默认值为 content-box。这意味着你写的 width: 100px 只包含内容区，不包含 padding 和 border。在高密度屏幕、小视口下，这种行为极易导致布局溢出或尺寸误判。
实际开发中几乎总会重置为 border-box，原因很直接：它让宽高声明更符合直觉，尤其在响应式栅格、按钮、输入框等需要精确占位的场景下。
- 全局设置推荐写法：
* { box-sizing: border-box; } *:before, *:after { box-sizing: border-box; } - 不要只对
html或body设置 —— 子元素仍继承content-box，除非显式覆盖 - 某些第三方组件库（如早期 Bootstrap）内部依赖
content-box，覆盖前需确认兼容性
rem + viewport 缩放与盒模型尺寸如何联动？
用 rem 做等比缩放时，font-size 在 html 上动态设置（例如通过 JS 计算 document.documentElement.style.fontSize = width / 375 * 16 + 'px'），此时所有基于 rem 的 width、padding、margin 都会同步缩放 —— 但前提是这些值都落在 border-box 模型下。
否则会出现“看起来设了 1rem padding，实际占位远超预期”的问题，尤其在 iPhone SE（375px 宽）和 iPhone 14 Pro Max（430px 宽）之间切换时，content-box 下的 padding 会额外撑开容器。
立即学习“前端免费学习笔记（深入）”；
-
rem单位只影响数值计算，不改变盒模型行为；box-sizing才决定这个数值最终作用于哪一部分 - 若使用
vw替代rem（如width: 50vw），同样要配合border-box，否则padding会突破视口边界 - 避免混用：
width: 2rem+padding: 10px—— 固定像素 padding 在不同设备上视觉比例失真，应统一为 rem 或 calc()
flex 布局中盒模型错位的典型表现与修复
在 display: flex 容器内，子项若未设 box-sizing: border-box，且同时设置了 padding 和 flex: 1，就可能触发“内容溢出父容器”或“多列宽度不均”。这是因为 flex 的剩余空间分配逻辑基于 content-box 尺寸，而 padding 是额外加上的。
典型错误现象：三列等宽卡片，在部分安卓机型上右侧卡片换行，或卡片内文字被截断。
- 修复方式不是调
flex-basis，而是确保所有 flex item 启用box-sizing: border-box - 特别注意伪元素（
::before/::after）若参与布局，也必须显式设置box-sizing，否则它们的border或padding会破坏 flex 计算 - 慎用
min-width配合flex: 1：若min-width值按content-box设计（比如min-width: 120px），加上padding: 12px后实际最小占用 144px，容易撑破容器
input、button 等表单控件的盒模型陷阱
原生 <input type="text"> 和 <button></button> 在不同系统下默认 box-sizing 不一致：iOS Safari 通常为 border-box，而部分 Android 浏览器（尤其旧版 WebView）仍为 content-box。更麻烦的是，它们还自带 UA 样式中的 padding 和 border，且不可被简单 reset。
结果就是：同一段 CSS，在 iPhone 上输入框高度刚好，在华为某机型上却矮了 4px，或者右边图标被截掉半像素。
- 必须显式重置：
input, button, select, textarea { box-sizing: border-box; margin: 0; padding: 0.375rem 0.75rem; /* 统一用 rem，禁用 px */ border: 1px solid #ddd; } - 不要依赖
height控制表单控件高度 —— 应优先用padding+line-height（对文本类）或min-height（对 button） - 遇到光标偏移或文字垂直居中异常，大概率是
line-height与padding冲突，此时检查是否漏写了box-sizing，或font-size在不同系统下渲染差异
盒模型本身很简单，但移动端的麻烦在于：它永远不是孤立起作用的。viewport 缩放、字体渲染、flex 计算、表单 UA 样式，全都会和 box-sizing 产生隐式耦合。漏掉任意一环，尺寸就可能在某个机型上悄悄错位。
