css3中如何使用钙()函数

　　介绍

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

<代码>钙()从字面看我们可以把它理解为一个函数函数。其实calc就是英文单词计算(计算)的缩写;它是一个css3新增的功能,可以用来指定元素的长度,动态计算长度值。(推荐学习:css3手册)

在css3中钙()函数可以允许我们对属性值执行数学运算。

例如,我们可以使用钙()函数指定宽度值为两个或更多数值相加的结果,而不是把元素宽度值声明为一个静态像素值。

.demo { 　　宽度:钙(100 px + 50 px); 　　}

如果你使用过像sass这样的css预处理器的话,那么你可能会遇到如下的例子:

.demo { 　　宽度:100 px + 50 px; 　　}//使用SASS变量 　　宽为:美元100 px; 　　美元width-two: 50 px; 　　. bar { 　　宽度:宽为+ width-two美元; 　　}

然而,calc()函数提供了一个很好的解决方案,它有两个好处。首先,我们可以组合不同的单位。具体来说,就是我们可以混合使用各种单位来进行计算,如百分比,px, em,快速眼动等单位都可以混在一起使用,例如,我们可以创建一个表达式,它将从百分比值中减去像素值。

.demo { 　　宽度:钙(100% - 50 px); 　　}

在此示例中,.demo元素的宽度始终小于其父宽度的100%。

其次,使用钙()后,计算值是表达式本身,而不是表达式的结果值。这样在使用css预处理器执行数学表达式时,给予浏览器的值是表达式的结果值。

//在SCSS中指定值 　　.demo { 　　宽度:100 px + 50 px; 　　}//浏览器中编译的CSS及其计算值 　　.demo { 　　宽度:150 px; 　　}

使用钙()函数,浏览器解析的值是实际的钙()表达式。

//在css中指定值 　　.demo { 　　宽度:钙(100% - 50 px); 　　}//浏览器的计算值 　　.demo { 　　宽度:钙(100% - 50 px); 　　}

这意味着浏览器中的值可以更加动态,并且可以随着视图的变化而改变。我们可以有一个元素(值为:视图高度减去绝对值),它会随着视图的变化而改变。

<代码>

钙()函数可以使用数字属性值来执行加,减,乘,除,四则运算。具体而言,它可以被使用在& lt; length> & lt; frequency>, & lt; angle> & lt; time> & lt; number> & lt; integer>等数据类型中。

这里有一些例子:

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

注:

使用“+”和“-”时,其前后必须要有空格,如“widht:钙(12% + 5 em)“这种没有空格的写法是错误的,

使用“*”和“/笔?其前后可以没有空格,但建议留有空格。

<强>钙()嵌套使用

钙()函数可以嵌套使用。但是,内部函数将被视为简单的括号表达式。举例来说,以下嵌套表达式:

.demo { 　　宽度:钙(100%/钙(100 px * 2)); 　　}

相当于:

.demo { 　　宽度:钙(100%/(100 px * 2)); 　　}

下面我们通过一个简单的例子来看看钙()函数的使用

示例:居中元素(假设.demo盒子的高度和宽度都为300 px)

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

这就相当于:

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

<强>

css3中如何使用钙()函数

可以看出浏览器对于<代码>钙()函数的支持度还是不错的。

而对于不支持的浏览器来说,calc()函数将会把整个表达式给忽略掉。这就意味着我们将必须提供一个静态值给不支持的浏览器使用。

.demo { 　　宽度:90%;/*非支持浏览器设置静态值*/宽度:钙(100% - 50 px); 　　}

以上是css3中如何使用钙()函数的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!

css3中如何使用钙()函数