box-sizing:border-box 是用来改变盒模型的计算方式，使得元素的宽度和高度包括了内边距(padding)和边框(border)的大小，而不是只计算内容(content)部分的大小。这个属性可以解决元素宽度计算偏差的问题，让 CSS 布局更加合理和直观。
在默认的 content-box 盒模型中，元素的宽度和高度只包括内容(content)的大小，而不包括内边距(padding)和边框(border)的大小。这就意味着当我们设置一个元素的宽度为 100px，并给它加上 10px 的内边距和 1px 的边框时，元素的实际宽度会变成 122px，因为 100px + 10px + 10px + 1px + 1px = 122px。
而如果我们使用 border-box 盒模型，元素的宽度和高度会包括内边距(padding)和边框(border)的大小，因此设置元素的宽度为 100px，并给它加上 10px 的内边距和 1px 的边框时，元素的实际宽度仍然是 100px，因为 100px = 100px - 10px - 10px - 1px - 1px。
使用 box-sizing:border-box 可以方便我们进行响应式设计和布局，避免了因为内外边距和边框造成的布局偏差问题。