网站制作专家!做网站首选宁波甬派科技
如何制作网站的博客

CSS3 必须知道的 calc()数学运算

calc()数学运算

定义与用法
 
calc()函数用于动态计算长度值。
 
需要注意的是,运算符前后都需要保留一个空格,例如:width:calc(100%-10px);
 
任何长度值都可以使用calc()函数进行计算;
 
calc()函数支持"+","-","*","/"运算;
 
calc()函数使用标准的数学运算优先级规则;
 
支持版本:CSS3
 
CSStricks上有一系列的完整指南文章,我后面会翻译这些内容,更新不会一下子完成,而是会分成几个,防止自己因看到文章过长而没有坚持住。
 
CSS有一个特殊的calc()函数,用于做基本的数学运算。下面是一个例子:
 
。main-content{
 
/*Subtract80pxfrom100vh*/
 
height:calc(100vh-80px);
 
}
 
在本指南中,让我们来介绍一下关于这个非常有用的功能所需要了解的一切。
 
clac()是针对值
 
你唯一可以使用calc()函数的地方是在值中。请看这些例子,我们在这些例子中设置了一些不同属性的值。
 
//codefromhttp://caibaojian。com/css-calc-guide。html
 
。el{
 
font-size:calc(3vw+2px);
 
width:calc(100%-20px);
 
height:calc(100vh-20px);
 
padding:calc(1vw+5px);
 
}
 
它也可以仅用于部分属性,例如:
 
。el{
 
margin:10pxcalc(2vw+5px);
 
border-radius:15pxcalc(15px/3)4px2px;
 
transition:transformcalc(1s-120ms);
 
}
 
它甚至可以成为构成属性一部分的另一个功能的一部分!例如,这里的calc()用于渐变的色标中·
 
。el{
 
background:#1E88E5linear-gradient(
 
tobottom,
 
#1E88E5,
 
#1E88E5calc(50%-10px),
 
#3949ABcalc(50%+10px),
 
#3949AB
 
);
 
}
 
calc()用于长度和其他数值
 
请注意,以上所有示例本质上都是基于数字的。我们会讲到一些数的使用注意事项(因为有时你不需要单位),但这是针对数字的数学,而不是字符串之类的东西。
 
。el{
 
/*Nope!*/
 
counter-reset:calc("My"+"counter");
 
}
 
。el::before{
 
/*Nope!*/
 
content:calc("Candyman"*3);
 
}
 
CSS有很多长度,它们都可以与calc()一起使用:
 
px
 
%
 
em
 
rem
 
in
 
mm
 
cm
 
pt
 
pc
 
ex
 
ch
 
vh
 
vw
 
vmin
 
vmax
 
无单位的数字也是可以接受的,例如line-height:calc(1。2*1。2);以及诸如transform:rotate(calc(10deg*5));之类的角度。
 
您也可以不执行任何计算并且仍然有效:
 
。el{
 
/*LittleweirdbutOK*/
 
width:calc(20px);
 
}
 
不能在媒体查询中使用
 
当正确使用calc()时(长度单位作为属性的值),可悲的是,当应用于媒体查询时,calc()将无法工作。
 
@media(max-width:40rem){
 
/*Narrowerorexactly40rem*/
 
}
 
/*Nope!*/
 
@media(min-width:calc(40rem+1px)){
 
/*Widerthan40rem*/
 
}
 
有一天,这将是很酷的,因为你可以用一种相当合理的方式(如上)进行相互排斥的媒体查询。
 
混合单位
 
这也许是calc()最有价值的功能!几乎上面的每一个例子都已经做到了这一点,但只是为了强调一下,这里是将不同的单位混合在一起。
 
/*Percentageunitsbeingmixedwithpixelunits*/
 
width:calc(100%-20px);
 
这是说。元素的宽度,减去20个像素就可以了。
 
在流体宽度的情况下,完全没有办法单独用像素来预计算这个值。换句话说,你不能用Sass这样的东西来预处理calc(),因为它是一个试图完成的polyfill。不是说你需要这样做,因为浏览器的支持很好。但问题是,当你用这种方式混合单位时,必须在浏览器中完成(在"运行时"),这也是calc()的大部分值。
 
下面是其他一些混合单位的例子。
 
transform:rotate(calc(1turn+45deg));
 
animation-delay:calc(1s+15ms);
 
这些可能会被预处理,因为它们混合了与运行时确定的任何单位都不相关的单位。
 
与预处理器数学比较
 
我们刚刚介绍了您无法预处理calc()可以执行的最有用的操作。但是有一点重叠。例如,Sass内置了数学功能,因此您可以执行以下操作:
 
$padding:1rem;
 
。el【data-padding=“extra”】{
 
填充:$padding+2rem;//处理到3rem;
 
底边距:$padding*2;//处理到2rem;
 
}
 
甚至带有单位的数学也可以在这里工作,将相同单位的值相加或乘以无单位数。但是您不能混合使用单位,并且它与calc()有类似的限制(例如,乘和除必须使用无单位的数字)。
 

CSS3 必须知道的 calc()数学运算
本文章网址:

宁波甬派网络专注于企业网站建设、网站制作、高端网站设计,做网站首选宁波甬派!

版权申明:本站部分文章来自互联网,如有侵权,请联系小编微信285559800,我们收到后立即删除 谢谢!
上一篇:架设一个网站建设一个网站需要多少流程?一个公司网站大概需要花多少钱
下一篇:五月体验AI文章生成器测试(1)