CSS3运算 calc()函数是怎么实现计算

CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。

.foo {  width: calc(100px + 50px);}

为什么是 calc()

如果你使用过 CSS预处理器，比如 SASS，以上示例你或许碰到过。

.foo {    width: 100px + 50px;}
// Or using SASS variables$width-one: 100px;$width-two: 50px;.bar {    width: $width-one + $width-two;}

然而，calc() 函数提供了更好的解决方案。首先，我们能够组合不同的单元。特别是，我们可以混合计算绝对单元（比如百分比与视口单元）与相对单元（比如像素）。例如，我们可以创造一个表达式，用一个百分比减掉一个像素值。

.foo {    width: calc(100% - 50px);}

本例中，.foo 元素总是小于它父元素宽度 50px。 第二，使用 calc()，计算值是表达式它自己，而非表达式的结果。当使用 CSS 预处理器做数学运算时，给定值为表达式的结果。

// Value specified in SCSS.foo {    width: 100px + 50px;}
// Compiled CSS and computed value in browser.foo {    width: 150px;}

然而，浏览器解析的 calc() 的值为真实的 calc() 表达式。

// Value specified in CSS.foo {    width: calc(100% - 50px);}
// Computed value in browser.foo {    width: calc(100% - 50px);}

这意味着浏览器中的值可以更加灵活，能够响应视口的改变。我们能够给元素设定一个高度为视口的高度减去一个绝对值，它将随视口的改变进行调节。

使用 calc()

calc() 函数可以用来对数值属性执行四则运算。比如，<length>，<frequency>，<angle>，<time>，<number> 或者 <integer 数据类型 这里有一些示例：

.foo {    width: calc(50vmax + 3rem);    padding: calc(1vw + 1em);    transform: rotate( calc(1turn + 28deg) );    background: hsl(100, calc(3 * 20%), 40%);    font-size: calc(50vw / 3);}

calc() 函数可以用来对数值属性执行四则运算。比如

.foo {    width: calc( 100% / calc(100px * 2) );}

函数的计算值如下所示：

.foo {    width: calc( 100% / (100px * 2) );}

学习更多技能

请点击下方公众号