css 属性box-sizing: border-box

admin

box-sizing: border-box; 是一个 CSS 属性，用于控制元素的盒模型计算方式。具体来说，它改变了元素的宽度和高度的计算方式，使其包括内边距（padding）和边框（border）。

详细解释：
- 默认盒模型（box-sizing: content-box;）：

- 元素的宽度和高度只包括内容区域，不包括内边距和边框。

- 例如，如果你设置一个元素的宽度为 `100px`，并且有 `10px` 的内边距和 `5px` 的边框，那么实际占用的宽度将是 `100px + 10px + 10px + 5px + 5px = 130px`。

- border-box` 盒模型：

- 元素的宽度和高度包括内容、内边距和边框。

- 例如，如果你设置一个元素的宽度为 `100px`，并且有 `10px` 的内边距和 `5px` 的边框，那么实际占用的宽度仍然是 `100px`，内容区域的宽度会自动调整为 `100px - 10px - 10px - 5px - 5px = 70px`。

使用示例：

1. .box {
   
2.   width: 100px;
   
3.   padding: 10px;
   
4.   border: 5px solid black;
   
5.   box-sizing: border-box; /* 使宽度包括内边距和边框 */

复制代码

使用 `box-sizing: border-box;` 可以更容易地控制元素的尺寸，避免在设置宽度和高度时出现意外的布局问题。