在css中使用 Calc() 函数的一些用法例子

calc()是一种在 CSS 中进行简单数学运算的原生 CSS 方法,可表示任何长度值(或几乎任何数值)。它有四个简单的数学运算符:加 (+)、减 (-)、乘 (*) 和除 (/)。能在代码中进行数学运算是件好事,也是对这种看重数学运算的语言的有益补充。

但它有用吗?过去我曾绞尽脑汁试图找出明显有用的一些例子。不过肯定有一些。

CSS预处理器不能做我们的数学吗?

所有 CSS 预处理器都有数学函数,而且非常有用。但它们并不像Native数学计算那样强大。calc()最有用的功能是混合单位计算,如百分比和像素。任何预处理器都无法做到这一点。这必须在渲染时进行。

语法

.thing {
  width: 90%; /* fallback if needed */
  width: calc(100% - 3em);
}

数学运算符周围必须有空格。可以嵌套。

例#1:(100%高度减去header高度)

高度为100% 的块级子元素将与其块级父级元素一样高。比如下图,让彩色模块与父元素一样高:

图0:在css中使用 Calc() 函数的一些用法例子

但现在假设父元素变得太小,无法容纳模块中的所有内容。你希望内容滚动,但只希望内容滚动,而不是整个模块滚动。只要设置 overflow-y: auto; 就可以了,对吗?不完全是,因为只有当内容元素本身具有可溢出的设定高度时,overflow-y 才有用。我们不能让内容元素的高度达到 100%,因为有header在,高度会太高。我们需要 100%减去header的高度。如果我们知道header的高度,就可以做到这一点!

图1:在css中使用 Calc() 函数的一些用法例子

* {
  /* So 100% means 100% */
  box-sizing: border-box;
}
html, body {
  /* Make the body to be as tall as browser window */
  height: 100%;
  background: #ccc;
  padding: 20px;
}
body {
  padding: 20px;
  background: white;  
}
.area-one {
  /* With the body as tall as the browser window
     this will be too */
  height: 100%;
}
.area-one h2 {
  height: 50px;
  line-height: 50px;
}
.content {
  /* Subtract the header size */
  height: calc(100% - 50px);
  overflow: auto;
}

你可能会抱怨header不应该有固定大小。如果有一天,calc() 可以减去元素的测量尺寸,那可能会很酷,但目前还无法实现。你可以用省略号设置header溢出。

例2:计算出到右下角的x个像素

我们可以轻松地将背景图片定位在离左上角 X 像素的位置。

background-image: url(dog.png);
background-position: 50px 20px;

这样,dog.png 就会位于元素框左侧 50px 和顶部 20px 的位置。但如果你想让它离右边 50px,离底部 20px,又该怎么办呢?如果只是直接使用长度值,这是不可能的。但是,calc() 可以做到这一点!

background-image: url(dog.png);
background-position: calc(100% - 50px) calc(100% - 20px);

例3:自我实现的等距等边框

比方说,您希望两列相邻。第一列宽 40%,第二列宽 60%,但两列之间有固定的 1em 间距。不要想太多 网格有固定的间隙,但从某种意义上说,它们并不是真正的间隙。列本身会相互碰撞,而列是由这些列内部的填充物构成的。

使用 calc(),我们可以使第一列的宽度为 40%,右边距为 1em,然后使第二列的宽度为 60%,减去 1em。

.area-one {
  width: 40%;
  float: left;
  margin-right: 1em;
}

.area-two {
  width: calc(60% - 1em);
  float: right;
}

如果想保持更精确的比例,可以去掉两列中一半的边框。现在你有了两列真正的列,它们被固定的空间分隔开来,而不需要父元素或使用内部填充。

例 #4:使数学符号更容易理解

说到列,有时数字会显得得很混乱。比方说,如果你想要一个 7 列的网格,你可能会有这样的类:

.column-1-7 {
   width: 14.2857%
}
.column-2-7 {
   width: 28.5714%
}
.column-3-7 {
   width: 42.8571%
}

这并不是什么神奇的数字,但很难一目了然。

.column-1-7 {
   width: calc(100% / 7);
}
.column-2-7 {
   width: calc(100% / 7 * 2);
}
.column-3-7 {
   width: calc(100% / 7 * 3);
}

 

 

例 #5:有点蹩脚的 box-sizing替换功能

 

我喜欢使用通用的 box-sizing:border-box; 因为这意味着你不必做太多的数学运算来计算元素的实际大小,也不必在边框和padding等发生变化时调整数学运算。

如果您想模拟box-sizing的作用,可以使用 calc() 根据需要减去数值。

.module {
  padding: 10px;

  /* Same as box-sizing: padding-box */
  width: calc(40% - 20px);

  border: 2px solid black;

  /* Same as box-sizing: border-box */
  width: calc(40% - 20px - 4px);
}

不过,浏览器对 box-sizing 的支持远胜于 calc(),因此很少使用。

未来?

我认为,如果我们能在 content 属性以外的地方使用 attr() 函数,那将会非常有趣。有了它,我们就可以从 HTML 元素中提取值,对其进行计算,并使用新的数字进行设计。例如,根据输入内容所包含的数字为其着色。

/* Not real */
progress::progress-bar {
  transform: rotate(calc(!parent(attr(value))*18)) + deg);
}

 

 

 

 

 

本文文字及图片出自 出处

阅读余下内容
 

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注


京ICP备12002735号