CSS3 box-sizing 属性

CSS 属性：box-sizing

在 web 前端开发中，box-sizing 属性用于控制元素的盒模型的计算方式。默认情况下，元素的宽度和高度是指内容区域的宽度和高度，不包括边框和内边距。但是通过设置 box-sizing 属性，我们可以改变元素盒模型的计算方式，让元素的宽度和高度包括边框和内边距。

语法

----------- ----------- - -----------

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

示例

---- -
  ------ ------
  -------- -----
  ------- --- ----- -----
  ----------- -----------
-

---- ---------------------- -------------

在上面的示例中，设置了一个类名为 .box 的元素，宽度为 200px，内边距为 20px，边框为 1px 实线黑色。通过设置 box-sizing 为 border-box，元素的宽度和高度将包括内容区域、边框和内边距，最终元素的实际宽度为 200px，而不是 242px（200px + 20px2 + 1px2）。

box-sizing 属性在响应式布局和网页排版中非常有用，可以更精确地控制元素的尺寸，避免因为边框和内边距导致布局错乱的情况。通过灵活运用 box-sizing 属性，可以提高网页的美观性和用户体验。