如何借助CSS3的sizing属性优化移动端网页的盒模型解析逻辑？

box-sizing 是 CSS 控制元素宽高计算逻辑的核心属性，非 sizing；设为 border-box 可使 width/height 包含 padding 和 border，避免移动端并排元素溢出，需全局重置并兼容旧浏览器。

box-sizing 不是 sizing 属性，这是个常见误写。真正起作用的是 box-sizing，它直接改变元素宽高的计算逻辑，尤其在移动端能大幅降低布局出错率。

为什么移动端必须设 box-sizing: border-box

移动端屏幕窄、并排元素多（比如两栏卡片、输入框+按钮），一旦用默认的 content-box，width: 50% + padding: 12px + border: 1px 就会溢出父容器——因为实际宽度 = 50% + 24px + 2px。

• 设成 border-box 后，width: 50% 就真等于“占一半”，内边距和边框自动往里缩
• 所有带 padding 或 border 的表单控件（input、textarea）都建议统一加该声明，否则 iOS Safari 下容易错位
• 不设的话，100% - 2px 这类 hack 写法会反复出现，维护成本高

box-sizing 的浏览器兼容写法怎么写才不漏

虽然现代浏览器（Chrome 10+、Firefox 4+、Safari 5.1+、iOS Safari 4.2+）原生支持 box-sizing，但旧版 Android Webview（4.3 及更早）和部分 UC 内核仍需前缀。

• 必须同时写三行：box-sizing: border-box、-moz-box-sizing: border-box（Firefox 16 以前）、-webkit-box-sizing: border-box（Safari 5.1 / iOS 5）
• 别只写 -webkit- —— 安卓 4.0~4.3 的原生浏览器认 -moz- 而不是 -webkit-
• 全局重置推荐这样写，避免漏掉表单元素：

  *, *::before, *::after { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

哪些元素默认不继承 box-sizing，必须单独设

box-sizing 不是继承属性，且部分原生控件（尤其是表单）在不同浏览器中默认值不一致。比如：

立即学习“前端免费学习笔记（深入）”；

• input[type="search"] 在 Safari 中默认是 content-box，哪怕父级设了 border-box 也不生效
• textarea、select 在某些安卓 WebView 中仍按 content-box 渲染
• 第三方 UI 库（如 Vant、NutUI）若没全局设 box-sizing，其内部组件可能意外撑开
• 解决方案：对所有表单控件显式声明，不要依赖继承

  input, textarea, select, button { box-sizing: border-box; }

最常被忽略的一点：当用 calc() 配合 border-box 时，比如 width: calc(100% - 20px)，这个 20px 是指外边距或间隙，不是为了抵消 padding/border——border-box 已经管了那部分。算错就又绕回老问题。