在css中使用 Calc() 函数的一些用法例子
calc()是一种在 CSS 中进行简单数学运算的原生 CSS 方法,可表示任何长度值(或几乎任何数值)。它有四个简单的数学运算符:加 (+)、减 (-)、乘 (*) 和除 (/)。能在代码中进行数学运算是件好事,也是对这种看重数学运算的语言的有益补充。
但它有用吗?过去我曾绞尽脑汁试图找出明显有用的一些例子。不过肯定有一些。
CSS预处理器不能做我们的数学吗?
所有 CSS 预处理器都有数学函数,而且非常有用。但它们并不像Native数学计算那样强大。calc()最有用的功能是混合单位计算,如百分比和像素。任何预处理器都无法做到这一点。这必须在渲染时进行。
语法
.thing {
width: 90%; /* fallback if needed */
width: calc(100% - 3em);
}
数学运算符周围必须有空格。可以嵌套。
例#1:(100%高度减去header高度)
高度为100% 的块级子元素将与其块级父级元素一样高。比如下图,让彩色模块与父元素一样高:
但现在假设父元素变得太小,无法容纳模块中的所有内容。你希望内容滚动,但只希望内容滚动,而不是整个模块滚动。只要设置 overflow-y: auto; 就可以了,对吗?不完全是,因为只有当内容元素本身具有可溢出的设定高度时,overflow-y 才有用。我们不能让内容元素的高度达到 100%,因为有header在,高度会太高。我们需要 100%减去header的高度。如果我们知道header的高度,就可以做到这一点!
* {
/* 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);
}
本文文字及图片出自 出处