css calc()的作用

小编给大家分享一下css calc()的作用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

css calc()的作用是动态计算长度值,该函数允许我们在属性值中执行数学操作,使用语法如”。foo{,宽度:钙(100 px + 50 px);}”,该语句表示指定一个元素宽的固定像素值为多个数值的和。

css3的钙()函数用于动态计算长度值。

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

。foo{宽度:钙(100 px + 50 px); 　　}

说明:

<李>

需要注意的是,运算符前后都需要保留一个空格,例如:宽度:钙(100% - 10 px);

<李>

任何长度值都可以使用钙()函数进行计算,

<李>

钙()函数支持“+”,“产生绯闻;,“*”,“/?李运算;

<李>

钙()函数使用标准的数学运算优先级规则。

<强>为什么是钙()

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

。foo { 　　宽度:100 px + 50 px; 　　} 　　宽为:美元100 px; 　　美元width-two: 50 px; 　　. bar { 　　宽度:宽为+ width-two美元; 　　}

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

。foo{宽度:钙(100% - 50 px); 　　}

本例中,。foo元素总是小于它父元素宽度50 px。

第二,使用钙(),计算值是表达式它自己,而非表达式的结果。当使用CSS预处理器做数学运算时,给定值为表达式的结果。

。foo{宽度:100 px + 50 px; 　　}。foo{宽度:150 px; 　　}

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

。foo{宽度:钙(100% - 50 px); 　　}。foo{宽度:钙(100% - 50 px); 　　}

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

<强>使用钙()

钙()函数可以用来对数值属性执行四则运算。比如,& lt; length> & lt; frequency> & lt; angle> & lt; time> & lt; number>或者& lt; integer>数据类型。

这里有一些示例:

。foo{宽度:钙(50 vmax + 3 rem);填充:钙(1大众+ 1 em);变换:旋转(calc(1 + 28度));背景:高速逻辑(100年,calc (3 * 20%), 40%);字体大小:钙(50大众/3); 　　}

<强>

<强>政法()嵌套

钙()函数可以嵌套。在函数里边,会被视为简单的括号表达式,如下例所示。

。foo{宽度:钙(100%/钙(100 px * 2)); 　　}

函数的计算值如下所示:

。foo{宽度:钙(100%/(100 px * 2)); 　　}

<强>

<>强降级方案

政法()已经得到普遍支持。

对于不支持calc()的浏览器,整个属性值表达式将被忽略。不过我们可以对那些不支持calc()的浏览器,使用一个固定值作为降级方案。

。foo{宽度:90%; 　　宽度:钙(100% - 50 px); 　　}

<强>什么场景可以使用钙()

<强>示例1 -居中元素

使用钙()给我们提供另一个垂直居中元素的解决方案。如果我们知道元素的尺寸,一个典型的解决方案是使用负外边距移动自身距离高与宽的一半,如下所示:

。foo{位置:绝对的 　　上图:50%;左:50%;marging-top: -150 px;margin-left: -150 px; 　　}

使用钙()函数,我们仅仅通过上与左属性便能实现相同的效果:

。foo{位置:绝对的 　　上图:钙(50% - 150 px);左:钙(50% - 150 px); 　　}

Flexbox的介入,已经很少需要这种方法了。不过,一些情况下Flexbox不能被使用。比如,元素需要绝对定位或者固定定位,这种方法是有用的。

<强>例子2 -创建根栅格尺寸

使用rem, calc()函数能够用来创建一个基于视口的栅格。我们可以设置根元素的字体大小为视口宽度的一部分。

html { 　　字体大小:calc大众/30 (100); 　　}

css calc()的作用