box-sizing: border-box使width/height包含padding和border，避免布局错位；全局推荐用, ::before, *::after统一设置，少数场景如canvas需手动切回content-box。
box-sizing 属性必须显式设置
HTML 元素默认用的是 box-sizing: content-box，这意味着你写的 width: 200px 只管内容区，加上 padding: 10px 和 border: 2px solid black 后，实际占宽变成 224px（200 + 10×2 + 2×2）。这不是 bug，是标准行为，但多数人想要的是“我设 200px 就真占 200px”。
所以必须手动改：box-sizing: border-box 才能让 width 和 height 包含 padding 和 border。
-
box-sizing: content-box：默认值，width/height 仅作用于 content 区 -
box-sizing: border-box：width/height 包含 content + padding + border（不包含 margin） -
box-sizing: inherit：从父元素继承，慎用，容易失控
全局重置推荐写法
别只给单个元素加 box-sizing: border-box，容易漏。行业通用做法是在 CSS 开头统一重置：
*,
*::before,
*::after {
box-sizing: border-box;
}
这个选择器覆盖所有元素及其伪元素，确保后续所有尺寸控制都按“总宽 = width”理解。注意：它不影响 margin，margin 始终额外计算。
如果你用的是现代框架（如 Tailwind），它默认已启用该重置；但纯手写 CSS 或老项目，这行代码几乎必加。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
flex 子项里 box-sizing 依然生效，但 width 不一定起作用
在 display: flex 容器中，子项的 width 是否生效，取决于它的 flex 设置：
-
flex: 0 0 200px→box-sizing生效，宽度锁定为 200px（含 padding/border） -
flex: 1→ 等价于flex: 1 1 0，此时width被忽略，box-sizing对布局无实际影响 -
flex-basis: 200px才是真正替代width的属性，它受box-sizing控制
换句话说：box-sizing 管“怎么算宽”，flex-basis 管“以什么为基准宽”，两者配合才稳。
inline 元素设 box-sizing 没意义
span、a 这类 display: inline 元素，width 和 height 本就无效，所以 box-sizing 设了也白设——浏览器直接忽略。
如果真要控制尺寸，得先改显示类型：
- 用
display: inline-block：支持width/height，box-sizing生效 - 用
display: inline-flex：同样支持，且自带 flex 行为 - 别试图靠
line-height“撑高” inline 元素来模拟 height，那是错位解法，会破坏基线对齐
box-sizing 是盒模型的开关，但它只对能接受 width/height 的元素起作用。判断优先级永远是：显示类型 → 尺寸属性可用性 → box-sizing 解释方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
