css中对 box—sizing 属性的了解

box-sizing是CSS中一个用于指定元素盒模型的属性，用于控制元素的尺寸计算方式。

默认情况下，元素的尺寸计算方式是content-box，即元素的宽度和高度只包含内容区域的大小，不包括边框和内边距。而使用box-sizing属性可以改变元素的尺寸计算方式，有两个可选值：

• content-box：默认值，元素的宽度和高度只包含内容区域的大小，不包括边框和内边距。
• border-box：元素的宽度和高度包含了内容区域、内边距和边框的大小。

使用border-box时，元素的总宽度和高度可以通过设置width和height属性来直接控制，而不需要再考虑边框和内边距的影响。这样可以更方便地控制元素的尺寸，特别是在响应式布局中更加灵活。

例如，下面的代码使用border-box来设置一个宽度为100px、内边距为10px、边框为1px的div元素：

div {
  box-sizing: border-box;
  width: 100px;
  padding: 10px;
  border: 1px solid black;
}

此时，该元素的总宽度为100px，包括了内容区域、内边距和边框的大小。