CSS计算属性 calc()的完整指南

2020-06-05 07:47:00 1504 1 编辑:深圳网站建设 来源:互联网

CSS tricks上有一系列的完整指南文章,我后面会翻译这些内容,更新不会一下子完成,而是会分成几个,防止自己因看到文章过长而放弃翻译,一步一个脚印。

CSS有一个特殊的calc()函数,用于做基本的数学运算。下面是一个例子:

.main-content {

  /* Subtract 80px from 100vh */

  height: calc(100vh - 80px);

}

在本指南中,让我们来介绍一下关于这个非常有用的功能所需要了解的一切。

calc() 只作用于属性值

你唯一可以使用calc()函数的地方是在值中。请看这些例子,我们在这些例子中设置了一些不同属性的值。

.el {

  font-size: calc(3vw + 2px);

  width:     calc(100% - 20px);

  height:    calc(100vh - 20px);

  padding:   calc(1vw + 5px);

}

它也可以仅用于部分属性,例如:

.el {

  margin: 10px calc(2vw + 5px);

  border-radius: 15px calc(15px / 3) 4px 2px;

  transition: transform calc(1s - 120ms);

}

它甚至可以成为构成属性一部分的另一个功能的一部分! 例如,这里的calc() 用于渐变的色标中

.el {

  background: #1E88E5 linear-gradient(

    to bottom,

    #1E88E5,

    #1E88E5 calc(50% - 10px),

    #3949AB calc(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 {

  /* Little weird but OK */

  width: calc(20px);

}

不能在媒体查询中使用

当正确使用calc()时(长度单位作为属性的值),可悲的是,当应用于媒体查询时,calc()将无法工作。

@media (max-width: 40rem) {

  /* Narrower or exactly 40rem */

}

/* Nope! */

@media (min-width: calc(40rem + 1px)) {

  /* Wider than 40rem */

}

有一天,这将是很酷的,因为你可以用一种相当合理的方式(如上)进行相互排斥的媒体查询。

混合单位

这也许是calc()最有价值的功能! 几乎上面的每一个例子都已经做到了这一点,但只是为了强调一下,这里是将不同的单位混合在一起。

/* Percentage units being mixed with pixel units */

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()有类似的限制(例如,乘和除必须使用无单位的数字)。

高端网站设计.jpg

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询 微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询