6.1 calc() 函数的基本功能
函数 calc() 提供在 CSS 中执行数学运算的能力，这样可以创建更灵活和自适应的样式。此函数特别适合用于组合不同的计量单位和动态计算值，比如尺寸、内边距、边框和其他属性。
函数 calc() 允许执行四种基本的数学运算：加法、减法、乘法和除法。这些运算可以用于组合不同的单位（像素、百分比、em、rem 等），这使得创建自适应和动态样式更加容易。
语法：
selector {
property: calc(expression);
}
操作示例：
- 加法:
calc(100% + 20px) - 减法:
calc(50% - 10px) - 乘法:
calc(10px * 2) - 除法:
calc(100px / 2)
示例：
<div>
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
div {
width: calc(100% - 50px);
margin: calc(1em + 10px);
background: lightblue;
}
在这个示例中：
- 元素的宽度计算为
100%减去50px - 内边距计算为
1em和10px之和
6.2 calc() 函数的使用示例
1. 加法和减法
函数 calc() 经常用于加法和减法运算，这让你可以更准确地控制元素的尺寸和内边距。
示例 1: 加百分比和像素
在这个例子中，容器的宽度计算为父元素宽度的100%减去40像素。 这样就可以考虑到容器内的内边距和其他元素：
<div class="container">
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
.container {
width: calc(100% - 40px);
margin: 20px;
background: lightgreen;
}
示例 2: 减去固定值
在这个例子中，侧边栏的宽度计算为父元素宽度的100%减去250像素，这样能给主要内容留出空间：
<div class="sidebar">
<ul>
<li><a href="#"></a>Article 1</li>
<li><a href="#"></a>Article 2</li>
<li><a href="#"></a>Article 3</li>
</ul>
</div>
.sidebar {
width: calc(100% - 250px);
background: tomato;
}
2. 乘法和除法
函数 calc() 也可以用于乘法和除法运算，这对于创建比例尺寸和内边距非常有用。
示例 3: 乘法
在这个例子中，元素的高度计算为20像素乘以3，即60像素：
<div class="element">Element</div>
.element {
height: calc(20px * 3);
background: lightpink;
}
示例 4: 除法
在这个例子中，块的宽度计算为父元素宽度的三分之一，这样可以创建三个相等的列：
<div class="box">
Box
</div>
.box {
width: calc(100% / 3);
background: yellow;
}
6.3 组合不同的计量单位
函数 calc() 的一个关键能力就是组合不同的计量单位，这样可以创建自适应和灵活的样式。
示例 5: 组合百分比和像素
在这个示例中，标题的高度计算为视口高度的100%减去50像素，这样可以考虑固定的内边距。
<header class="header">
<nav>
<ul>
<li>首页</li>
<li>关于我们</li>
<li>联系我们</li>
</ul>
</nav>
</header>
.header {
height: calc(100vh - 100px);
background: lightgreen;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-around;
padding: 10px;
}
动态尺寸计算
函数 calc() 对于创建动态计算的元素尺寸非常有用，这使得设计更加自适应和灵活。
示例 6: 动态宽度计算
在这个示例中，内容的宽度计算为父元素宽度100%减去每边20像素双倍的内边距：
<div class="content">
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
.content {
width: calc(100% - 2 * 20px);
background: lightgreen;
}
6.4 在媒体查询中使用 calc()
函数 calc() 可以在媒体查询中使用，以创建自适应样式。
示例 7: 媒体查询中的自适应内边距
在这个示例中，当视口宽度达到600像素时，容器的内边距会根据视口宽度增大：
<div class="container">
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
.container {
padding: 10px;
background: tomato;
}
@media (min-width: 600px) {
.container {
padding: calc(10px + 2vw);
}
}
示例 8: 媒体查询中的自适应尺寸
在这个示例中，在屏幕宽度达到600像素时，容器的内边距减半，这样可以提高设计的适应性：
<div class="container">
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
:root {
--main-padding: 20px;
}
.container {
padding: var(--main-padding);
background: yellow;
}
@media (max-width: 600px) {
.container {
padding: calc(var(--main-padding) / 2);
}
}
6.5 优缺点
使用 calc() 函数的优势：
1. 灵活性。 函数 calc() 通过组合不同单位和执行数学运算，能够创建更灵活和自适应的设计。
2. 动态样式管理。 使用 calc() 可以动态改变元素的尺寸和内边距，使设计更加响应和自适应。
3. 简化复杂计算。 函数 calc() 在 CSS 中简化复杂计算，避免使用 JavaScript 执行简单数学运算。
calc() 函数的限制和特点：
1. 操作符周围的空格。 在 calc() 表达式中，操作符周围必须有空格。例如，calc(100% - 50px) 是正确的，而 calc(100%-50px) 会导致错误。
2. 浏览器兼容性。 函数 calc() 得到大多数现代浏览器的支持，但对于旧版本可能需要检查兼容性。
3. 性能。 使用函数 calc() 可能会略微增加页面的渲染时间，特别是在复杂计算或频繁改变值时。
GO TO FULL VERSION