CSS3中如何使用`box-sizing`属性？

`box-sizing`属性是CSS3中用于调整元素盒模型的边距、边框、内边距的计算方式。在CSS中，每个元素的宽度和高度可以通过`width`和`height`属性来设置，但默认情况下，这些尺寸只包括内容区域，不包括边框和内边距。`box-sizing`属性可以改变这种默认行为，使得元素的宽度和高度包括内容、内边距和边框。

`box-sizing`属性主要有两个值：

1. `content-box`（默认值）：此值下，宽度和高度只包括内容区域，不包括边框和内边距。这是标准盒模型（标准模式）。

2. `border-box`：此值下，宽度和高度包括内容、内边距和边框。这是替代盒模型（怪异模式）。

举个例子：

/* 设置所有元素的盒模型为 border-box */
* {
    box-sizing: border-box;
}

/* 或者针对特定元素设置 */
.element {
    box-sizing: border-box;
    width: 200px;
    padding: 10px;
    border: 5px solid black;
}

在这个例子中，无论`element`元素有多少内边距和边框，其总宽度和高度始终是200px（加上边框和内边距的宽度）。