CSS3运算 calc()函数是怎么实现计算
web前端开发
共 1568字,需浏览 4分钟
·
2021-05-06 17:49
.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) );
}
学习更多技能
请点击下方公众号
评论