CSS 中calc()神技

html-css09

CSS 中calc()神技,第1张

众所周知，CSS有一个特殊的calc()函数，用于做基本的数学运算。

demo：

让我们来详细的学习一下这个功能吧:

calc()函数只能在值中使用。

demo:

也可以在部分属性的内部作为单独的值使用.

demo:

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

demo:

calc() 可以将不同的单位混合在一起 .

demo:(在sass中)

例如：假设我们需要写定一个父盒子的7分之一的宽度的盒子；

calc() 中可以使用加减乘除 , 但他们在使用方法上有所不同。

加法(+)和减法(-)要求这两个数都是长度

除法(/)要求第二个数字是无单位的

英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

calc()能做什么？

1. 执行数学运算

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

2. 实现居中效果

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

3. 创建根栅格尺寸

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

4. 提高计算清晰度

使用 calc()，我们还能做很多的事情，它是 CSS 中很有用的新特性之一。