border-box与content-box的不同

border-box和content-box是CSS中盒模型的两种不同表示方式。

content-box是默认的盒模型表示方式，它将元素的宽度和高度仅包括内容区域，不包括边框和内边距。也就是说，设置的宽度和高度属性仅指定了内容区域的尺寸。

而border-box是另一种盒模型表示方式，它将元素的宽度和高度包括了边框和内边距。也就是说，设置的宽度和高度属性指定了整个盒子的尺寸，包括内容区域、边框和内边距。

使用border-box时，当改变元素的边框或内边距时，其对应的内容区域尺寸会自动调整以保持整个盒子的尺寸不变。这对于布局设计时能够更加方便地控制元素的尺寸。

可以通过CSS的box-sizing属性来设置盒模型表示方式，取值为content-box或border-box。默认值是content-box。例如，可以使用以下样式来将元素的盒模型表示方式设置为border-box：

box-sizing: border-box;

通过理解和应用这两种盒模型表示方式，可以更好地控制元素在页面中的布局和尺寸。