4.1 box-sizing属性
CSS的box-sizing属性是一个强大的工具，用于管理元素的尺寸计算模型。
它定义了如何计算元素尺寸，包括宽度和高度，以及内边距、边框和外边距。下面我们将详细讨论box-sizing的工作原理，它的使用如何影响网页布局。
主要的box-sizing模型
Content-box (内容模型)
content-box是所有元素的默认值。在该模型中，元素的大小(width和height)只定义内容的大小，不包括内边距和边框。这意味着内边距和边框被加到元素的总宽度和高度中。
Border-box (边框模型)
border-box值改变了尺寸计算模型，元素的大小(width和height)包括内边距和边框。这意味着内边距和边框属于元素的总宽度和高度，使得尺寸计算和管理更加简单。
box-sizing使用示例：
.box {
background-color: #3498db;
color: white;
padding: 20px;
border: 5px solid #2c3e50;
margin: 10px;
width: 200px;
height: 100px;
}
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
<div class="box content-box">Content-box: 宽度和高度仅包括内容。</div>
<div class="box border-box">Border-box: 宽度和高度包括内边距和边框。</div>
代码说明：
.box: 所有盒子的基本样式，包括内边距、边框和大小.content-box: 使用box-sizing: content-box的元素，宽度和高度只包括内容.border-box: 使用box-sizing: border-box的元素，宽度和高度包括内边距和边框
4.2 box-sizing对布局的影响
内容模型 (Content-box)
当使用box-sizing: content-box;时，内边距和边框被加到元素的总宽度和高度中。
这可能导致在计算尺寸和定位元素时需要额外的考虑。
使用示例
在这种情况下，元素的总宽度是200px + 20px (padding) * 2 + 5px (border) * 2 = 250px，
总高度是100px + 20px (padding) * 2 + 5px (border) * 2 = 150px。
.content-box {
box-sizing: content-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
}
<div class="box content-box">Content-box: 宽度和高度仅包括内容。</div>
边框模型 (Border-box)
当使用box-sizing: border-box;时，内边距和边框包括在元素指定的宽度和高度中。
这简化了尺寸计算和管理，尤其是在创建响应式布局时。
使用示例：
.border-box {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
}
<div class="box border-box">Border-box: 宽度和高度包括内边距和边框。</div>
4.3 创建响应式布局
使用box-sizing: border-box;可以简化创建响应式布局的过程，因为元素的尺寸包括内边距和边框，防止意外的溢出。
使用示例：
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 10px;
background-color: #f4f4f4;
}
.item {
flex: 1 1 calc(33.333% - 20px);
padding: 20px;
border: 5px solid #3498db;
background-color: #fff;
}
<div class="container">
<div class="item">元素 1</div>
<div class="item">元素 2</div>
<div class="item">元素 3</div>
<div class="item">元素 4</div>
<div class="item">元素 5</div>
<div class="item">元素 6</div>
</div>
代码说明：
* { box-sizing: border-box; }: 将边框模型应用到页面上的所有元素，简化尺寸管理.container: 带有响应式布局的Flex容器.item: Flex元素，等比例分配宽度并将内边距和边框包括在总宽度中
4.4 固定尺寸和内边距
使用box-sizing: border-box;可以轻松为具有内边距的元素设置固定尺寸，而不用担心溢出问题。
使用示例：
.fixed-size {
box-sizing: border-box;
width: 300px;
height: 150px;
padding: 20px;
border: 5px solid #2ecc71;
background-color: #ecf0f1;
text-align: center;
line-height: 150px; /* 垂直居中对齐文本 */
}
<div class="fixed-size">
固定尺寸
</div>
代码说明：
.fixed-size: 元素的固定尺寸为300x150像素，包括内边距和边框，这使得尺寸控制更加精确
GO TO FULL VERSION