CSS 中的 calc() 函数
calc() 函数的基本用法
calc()函数是CSS3中的一个强大特性，可以用于在CSS属性中进行数学运算。它可以接受加减乘除等基本运算符，并且可以结合各种单位进行运算。
下面是一个简单的示例，展示了如何使用calc函数来计算长度值：
.container {
width: calc(50% - 20px);
}
在上述代码中，我们使用 calc() 函数来计算 .container 容器的宽度。它的值是屏幕宽度的一半减去 20 像素。
calc() 函数的高级应用
- 响应式布局中的 calc() 函数应用：
在响应式设计中，我们经常需要根据视窗大小来调整元素的宽度和高度。calc（）函数可以和视窗单位（如vw、vh）结合使用，以实现元素的动态调整。例如:
注意：1vw等于视窗宽度的1%，视窗单位是相对于试图大小而言的，而不是相对于父元素或者其他元素的大小。
.container {
width: calc(50vw - 20px);
height: calc(70vh - 40px);
}
在这个例子中，容器的宽度将是视窗宽度的50%，并且减去20像素的空间。通过使用vw和vh单位，容器的大小会根据视窗的大小动态调整，从而实现响应式设计。当视窗尺寸改变时，容器的宽度和高度也会自动适应变化。
- 使用 calc() 函数实现等比缩放的效果：
在某些情况下，我们希望元素的尺寸能够按比例缩放，以适应不同的屏幕尺寸。cacl（）函数可以配合百分比单位实现等比例缩放的效果。
例如：
.box {
width: calc(50% - 10px);
padding-top: calc(50% - 10px);
}
上述例子，盒子的宽度和上边距都会根据父元素宽度的50%进行计算，并且保持宽高比为1：1。
- 结合视窗单位和 calc() 函数创建自适应布局：
cacl（）函数可以与视窗单位结合使用，以实现更灵活的自适应布局。例如，我们可以根据视窗大小动态计算字体大小，并保持一定的比例关系。示例如下:
.title{
font-size: cacl(1rem + 1vw);
}
上述例子中，标题的字体大小会根据视窗宽度自动调整，同时保持与基准字体大小（1rem）的比例关系。
calc() 函数的注意事项
在使用calc（）函数时，需要注意一下几点：
- 运算符周围需要有空格
在calc（）函数中的运算符前后都需要有空格，这是为了与数值和单位之间做区分。例如：
.container {
width: calc(100% - 20px);
}
上述，运算符-前后都有空格
- 单位的使用
calc（）函数可以结合各种单位进行计算，例如像素（px）、百分比（%）、视窗宽度（vw）、视窗高度（vh）等。需要注意的是不同类型（例如长度值和时间值混合）的单位不能直接进行混合运算。
下面是一些示例：
.container {
width: calc(100% - 20px); /* 计算百分比和像素 */
height: calc(50vh - 10%); /* 计算视窗高度和百分比 */
font-size: calc(12px + 2vw); /* 计算像素和视窗宽度 */
margin: calc(10px + 5vh) auto; /* 计算像素和视窗高度 */
}
