属性：box-sizing
- 用于定义元素的盒模型组成模式，该属性有两个值，即
content-box和border-box
值说明
content-box是默认值，这意味着元素的宽度和高度只包括内容区域的宽度和高度，不包括边框和边距。换句话说，你的元素大小将由其内容决定，而不是由边框或填充决定。border-box意味着元素的宽度和高度将包括内容、边框和填充的宽度以及元素外边距的深度。这意味着，无论你如何设置宽度和高度，都不会影响边框和填充的大小。
示例代码
<!-- demo1.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./demo1.style.css">
<title>Box Sizing Example</title>
</head>
<body>
<div class="box">
<p>This is a box with box-sizing set to content-box.</p>
</div>
<div class="box border-box">
<p>This is a box with box-sizing set to border-box.</p>
</div>
</body>
</html>
/* demo1.style.css */
.box {
width: 200px;
height: 200px;
padding: 10px;
margin: 0px;
border: 5px solid black;
display: inline-block;
}
.content-box{
box-sizing: content-box;
}
.border-box{
box-sizing: border-box;
}
运行效果
解释说明
在这个示例中，我们为两个div元素设置了相同的宽度和高度、填充、边框和外边距。但由于box-sizing属性的不同值，这两个元素的最终尺寸将不同。
第一个div（content-box(默认)）的尺寸计算方式为：
width(宽度) + padding(内边距) + border(边框) = 元素实际宽度 height(高度) + padding(内边距) + border(边框) = 元素实际高度
可视化图示：
第二个div（border-box）的尺寸计算方式为：
width(宽度) - padding(内边距) - border(边框) = 元素实际宽度 height(高度) - padding(内边距) - border(边框) = 元素实际高度
可视化图示：
