1. CSS 3 中的 calc() 方法
CSS 3 中的 calc() 方法是一个非常强大的功能，它允许我们在 CSS 样式表中进行简单的数学计算，从而更灵活地控制页面的布局和元素的尺寸。通过使用 calc() 方法，我们可以减少对固定像素值的依赖，使得页面能够自适应不同的屏幕尺寸和设备。
1.1 calc() 方法的基本语法
calc() 方法的基本语法如下：
width: calc(expression);
height: calc(expression);
在这里，expression 是一个包含了数值和运算符的表达式，可以使用加（+）、减（-）、乘（*）和除（/）等运算符。在表达式中，我们还可以使用百分比（%）和 rem 单位作为计算的一部分。
1.2 calc() 方法的应用场景
calc() 方法在多种场景下都非常有用。以下是一些常见的应用场景：
1.2.1 动态调整元素的尺寸
使用 calc() 方法，我们可以根据其他元素的尺寸来调整自身的大小。下面是一个示例：
.container {
width: calc(100% - 20px);
height: calc(50% - 10px);
}
上面的代码中，.container 元素的宽度会自动适应父元素的宽度减去 20px，并且高度会自动适应父元素的高度减去 10px。
1.2.2 自适应布局
calc() 方法非常适合用于创建自适应的布局。例如，我们可以使用 calc() 方法将一个框架分为两个等宽的列：
.container {
display: flex;
}
.left-column {
width: calc(50% - 10px);
}
.right-column {
width: calc(50% - 10px);
}
上面的代码中，.container 元素使用 flex 布局，并将宽度均分为两个等宽的列。通过使用 calc() 方法，我们可以在两个列之间创建 10px 的间隔。
1.3 浏览器兼容性
calc() 方法在现代浏览器中得到了很好的支持，但在一些旧版本的浏览器中可能不被支持。为了确保网页的兼容性，我们可以使用 fallback 值，例如固定的像素值：
width: 300px;
width: calc(50%);
在上面的代码中，如果浏览器不支持 calc() 方法，将会使用 300px 作为宽度的值。
2. 总结
通过使用 CSS 3 中的 calc() 方法，我们可以在样式表中进行简单的数学运算，从而以更灵活的方式控制页面的布局和元素的尺寸。calc() 方法在动态调整元素的尺寸和创建自适应布局等场景中非常有用。虽然 calc() 方法具有良好的浏览器支持，但为了确保兼容性，我们可以提供 fallback 值。综上所述，calc() 方法是 CSS 3 中非常实用和强大的功能。