css属性box-sizing介绍

box-sizing 是 CSS 中用于控制元素盒模型计算方式的属性，它决定了元素的宽度和高度如何被计算，是否包含内边距（padding）和边框（border）。

它有以下几个常用值：

1. content-box（默认值）：

   • 元素的宽度和高度仅包含内容区域（content）
   • 内边距（padding）和边框（border）会增加元素的总尺寸
   • 例如：width: 100px 的元素，加上 padding: 10px 和 border: 5px 后，实际总宽度为 130px（100+102+52）

2. border-box：

   • 元素的宽度和高度包含内容区域、内边距和边框
   • 内边距和边框不会增加元素的总尺寸，而是从已设定的宽度 / 高度中分配空间
   • 例如：width: 100px 的元素，加上 padding: 10px 和 border: 5px 后，实际总宽度仍为 100px，内容区域会被压缩为 70px（100-102-52）

实际开发中，border-box 更常用，因为它能更直观地控制元素尺寸，避免因内边距和边框导致元素总尺寸超出预期。通常会在样式开头设置全局规则：

* {
  box-sizing: border-box;
}

这样所有元素都会采用 border-box 计算方式，简化布局计算。