边框默认增加元素总尺寸，用 box-sizing: border-box 可使 width/height 包含内容、内边距和边框；推荐全局设置 * { box-sizing: border-box; }，现代浏览器及 IE8+ 均支持。
边框默认会增加元素的总宽度和高度，导致布局错位或超出预期尺寸。解决方法是用 box-sizing 改变盒模型的尺寸计算方式。
box-sizing 的两种取值
content-box（默认）：width/height 只作用于内容区，边框和内边距额外增加总尺寸。
border-box：width/height 包含内容区、内边距和边框，总尺寸更可控。
统一设置 border-box 更稳妥
推荐在项目开头重置盒模型，避免逐个调整：
* { box-sizing: border-box; }/* 或更精准地只作用于常用元素 */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
实际效果对比
假设一个元素设置：
width: 200px;
padding: 10px;
border: 5px solid #000;
- content-box 下：总宽度 = 200 + 10×2 + 5×2 = 230px
- border-box 下：总宽度严格为 200px，内容区自动压缩为 170px
注意兼容性与使用场景
border-box 在所有现代浏览器中完全支持，IE8+ 也支持。
适合需要精确控制容器尺寸的场景，比如栅格布局、表单控件、卡片组件等。
慎用于需动态计算内容区大小的脚本逻辑——此时应主动读取 clientWidth 或用 getComputedStyle 获取真实内容尺寸。
