box-sizing：

它是一个css属性，用来规定元素宽度和高度的计算方式，也就是盒子模型的尺寸计算规则。

盒子模型基础

在了解box-sizing之前，需要先了解盒子模型的组成。一个元素在页面上所占的空间大小由内容区（content）、内边距（padding）、边框（border）和外边距（margin）构成。

• 内容区（content）：元素实际包含的内容，像文本、图片之类的。
• 内边距（padding）：内容区与边框之间的距离。
• 边框（border）：围绕内容区和内边距的线条。
• 外边距（margin）：元素与其他元素之间的距离。

属性值及作用

1.content-box(默认值）

• 公式：

元素总宽度 = width + padding + border + margin
元素总高度 = height + padding + border + margin

• 问题：添加 padding 或 border 会导致元素实际占用空间超出设定的 width/height。

2.border-box(推荐）

• 公式：

元素总宽度 = width（包含 content + padding + border） + margin
元素总高度 = height（包含 content + padding + border） + margin

• 优势：设置 padding 或 border 时，内容区域自动收缩，确保元素总尺寸不变。

总结：box-sizing: border-box 是更符合直觉的盒模型，能显著简化布局开发，建议在项目中优先采用。