1. CSS 内容框值介绍
CSS 内容框值指的是 content-box, padding-box 和 border-box 这三个框值。这三个框值决定了一个 CSS 元素从外到内分别是哪些部分。通过了解这三个框值的不同，我们可以更好地控制一个元素的样式。
1.1 content-box
content-box 是一个元素的默认框值。它指的是元素的内容区域，不包括元素的边框和内边距。具体来说，使用 content-box 框值时，元素的宽度和高度只包括其内容部分。如下面这个例子：
.box {
width: 200px;
height: 100px;
border: 1px solid black;
padding: 10px;
box-sizing: content-box;
}
上面这段 CSS 代码中，box-sizing: content-box; 指定了元素使用 content-box 框值，因此宽度和高度的计算方式只包括内容部分，不包括边框和内边距。因此，该元素的实际宽度为 200px，高度为 100px（不包括边框和内边距）。不同浏览器默认的 box-sizing 值不一样，因此在开发中需要注意。
1.2 padding-box
padding-box 框值指的是元素的内容区域和内边距，不包括元素的边框。具体来说，使用 padding-box 框值时，元素的宽度和高度包括内容区域和内边距，但不包括边框。如下面这个例子：
.box {
width: 200px;
height: 100px;
border: 1px solid black;
padding: 10px;
box-sizing: padding-box;
}
上面这段 CSS 代码中，box-sizing: padding-box; 指定了元素使用 padding-box 框值，因此宽度和高度的计算方式包括内容和内边距，但不包括边框。因此，该元素的实际宽度为 220px，高度为 120px（包括边框和内边距）。使用 padding-box 框值时，元素的大小变化不会影响到元素的边框宽度，因此在某些情况下可能很有用。
1.3 border-box
border-box 框值指的是元素的内容区域、内边距和边框。具体来说，使用 border-box 框值时，元素的宽度和高度包括内容区域、内边距和边框。如下面这个例子：
.box {
width: 200px;
height: 100px;
border: 1px solid black;
padding: 10px;
box-sizing: border-box;
}
上面这段 CSS 代码中，box-sizing: border-box; 指定了元素使用 border-box 框值，因此宽度和高度的计算方式包括内容、内边距和边框。因此，该元素的实际宽度为 200px，高度为 100px（包括边框和内边距）。使用 border-box 框值时，元素的大小变化会影响到元素的边框宽度，因此在某些情况下可能比较方便。
2. 应用示例
2.1 设置元素宽度为百分比
在设置元素的宽度时，如果不指定框值，那么元素的宽度将只包括元素的内容区域，不包括边框和内边距。在某些情况下，我们可能需要使用百分比来设置元素的宽度。如果此时没有指定框值，可能会导致布局出现意外的效果。如下面这个例子：
.outer {
width: 50%;
border: 1px solid black;
padding: 10px;
}
.inner {
width: 100%;
height: 50px;
background-color: #eee;
}
上面这段 CSS 代码定义了一个外层元素和一个内层元素。外层元素的宽度为 50%，内层元素的宽度为 100%。因为没有给元素指定框值，因此默认使用的是 content-box 框值。由于外层元素有边框和内边距，因此实际宽度为 50% + 2*11px（边框和内边距），内层元素的实际宽度也受到此影响。因此，最终显示效果并不是预期的效果。
解决这个问题的方法是给元素指定一个框值。如果想要内层元素的宽度铺满父元素，可以使用 border-box 框值：
.outer {
width: 50%;
border: 1px solid black;
padding: 10px;
box-sizing: border-box;
}
.inner {
width: 100%;
height: 50px;
background-color: #eee;
box-sizing: border-box;
}
这个时候，内层元素的实际宽度就正确了。
2.2 使用 calc 函数计算尺寸
在进行某些布局时，可能需要使用到 calc 函数来计算尺寸。calc 函数可以用于计算任何能被计算的 CSS 单位组合。使用 calc 函数时需要注意框值的问题。如下面这个例子：
.box {
width: calc(100% - 20px);
height: 200px;
border: 1px solid black;
padding: 10px;
}
上面这段 CSS 代码中，使用 calc 函数来计算元素的宽度为 100% 减去 20px。如果不指定框值，那么元素的实际宽度将只包括内容区域。因此，需要给元素指定 border-box 框值，以便正确地计算元素的大小：
.box {
width: calc(100% - 20px);
height: 200px;
border: 1px solid black;
padding: 10px;
box-sizing: border-box;
}
3. 总结
CSS 的内容框值决定了一个元素从外到内分别是哪些部分。默认框值为 content-box，如果需要更好地控制元素的样式，需要使用 padding-box 或 border-box 框值。在使用 calc 函数计算尺寸时，需要注意给元素指定框值，以便得到正确的计算结果。