CSS：calc() 函数 / 动态计算长度值 / 不同场景使用
warning:
这篇文章距离上次修改已过205天，其中的内容可能已经有所变动。
CSS calc() 函数可以用来动态计算长度值。这里提供了一些使用 calc() 函数的例子，适用于不同的场景。
- 计算元素的宽度和高度：
.element {
width: calc(100% - 20px);
height: calc(100% - 20px);
}- 设置元素的边距，使元素居中显示：
.center-div {
width: 50%;
margin-left: calc(50% - (50% / 2));
}- 设置元素的透明度：
.element {
opacity: calc(1 - 0.5); /* 计算透明度为0.5的时候的剩余不透明度 */
}- 设置元素的最小宽度为其容器的一半：
.element {
min-width: calc(50% - 1em);
}- 使用
calc()进行简单的数学运算：
.element {
padding: calc(1em + 10px);
border: calc(1px * 2);
margin: calc(5% + 10px);
}calc() 函数可以处理加法（+）、减法（-）、乘法（*）和除法（/），还可以在它的表达式中使用百分比、px、em、vh 等单位。这使得 CSS 布局和样式更加灵活多变。
评论已关闭