CSS box-sizing属性用来控制盒子模型尺寸，它允许开发者把更多的精力放在布局上，而不是计算每一个尺寸。它可以让你不用担心元素的内边距和边框会影响到元素的实际尺寸。
使用方法
要使用box-sizing属性，需要在元素的CSS声明中添加box-sizing属性：
box-sizing: border-box;
默认值是content-box，这意味着元素的宽度和高度仅仅是元素内容的宽度和高度，内边距和边框会增加元素的总尺寸。当设置为border-box时，元素的宽度和高度会包括元素的内边距和边框，而不会增加元素的总尺寸。
你可以使用box-sizing属性来设置元素的宽度和高度，让元素的宽度和高度不受内边距和边框的影响：
width: 500px; height: 500px; box-sizing: border-box;
这样，元素的宽度和高度都是500px，不会因为内边距和边框而变化。
你也可以使用box-sizing属性来设置元素的内边距和边框，而不影响元素的宽度和高度：
width: 500px; height: 500px; padding: 10px; border: 1px solid #ccc; box-sizing: border-box;
这样，元素的宽度和高度仍然是500px，而内边距和边框会增加元素的尺寸。
你还可以使用box-sizing属性来设置元素的内边距和边框，让元素的宽度和高度不受内边距和边框的影响：
width: 500px; height: 500px; padding: 10px; border: 1px solid #ccc; box-sizing: border-box;
这样，元素的宽度和高度仍然是500px，而内边距和边框会增加元素的尺寸。
CSS box-sizing属性可以让你更轻松地控制盒子模型尺寸，而不用担心元素的内边距和边框会影响到元素的实际尺寸。