元素实际宽高由content、padding、border组成，margin仅影响布局间距；默认box-sizing: content-box下，总宽度=width+左右padding+左右border+左右margin；设置box-sizing: border-box后，width已包含padding和border，更易控制尺寸，推荐全局使用。
CSS盒模型中，元素的实际宽高由内容区域（content）、内边距（padding）、边框（border）和外边距（margin）共同组成。其中，实际占用的宽高主要取决于前三个部分，因为 margin 不影响元素自身的尺寸，只影响与其他元素的间距。
元素实际宽度的计算方式
在默认的盒模型（即 box-sizing: content-box）下，元素的总宽度计算如下：
- 总宽度 = width + 左右 padding + 左右 border + 左右 margin
注意：margin 不属于元素“自身”的尺寸，但在页面布局中会影响其占据的空间。
例如：
立即学习“前端免费学习笔记（深入）”；
width: 200px;padding: 10px;
border: 5px solid black;
margin: 20px;
此时元素的实际宽度（占据空间）为：
200 + 10×2 + 5×2 + 20×2 = 270px
使用 border-box 改变计算方式
当设置 box-sizing: border-box 时，width 和 height 包含了 content、padding 和 border，此时你设定的 width 就是元素最终的总宽度（不含 margin）。
- 总宽度 = 设定的 width（已包含 padding 和 border）
- 实际占据宽度 = width + 左右 margin
这更符合直觉，推荐在项目中全局设置：
*, *::before, *::after {box-sizing: border-box;
}
高度计算同理
高度的计算逻辑与宽度一致：
- content-box：总高度 = height + 上下 padding + 上下 border
- border-box：设定的 height 已包含 padding 和 border
注意：某些情况下，内容超出设定高度会导致实际高度变大，特别是未设置 overflow 时。
基本上就这些，关键在于理解 box-sizing 的作用以及各部分叠加关系。掌握这一点，布局时就不会出现“为什么元素比我想的宽”这类问题了。
