龙空技术网

CSS属性值函数(2)calc()数值计算

无弦合奏 21

前言:

眼前同学们对“pburg函数怎么用”都比较珍视,朋友们都需要知道一些“pburg函数怎么用”的相关资讯。那么小编在网摘上网罗了一些对于“pburg函数怎么用””的相关资讯,希望兄弟们能喜欢,同学们快快来了解一下吧!

函数概述

calc()为CSS属性值数值计算函数,允许一些属性的值用数值计算表达式来动态处理,比如width、height、animation-duration、font-size、margin、padding等,数值类型为<number>的属性基本上都可以用。

虽然无需数学计算,CSS的单位(如rem,vw,和%已经可以使网页布局具有足够的弹性,来提升Web应用的用户体验。但是在有些情况下,以单一值或单一单位设置页面中某个元素的样式属性,总会让我们感觉束手束脚。下面是一些典型场景:

想要设置内容区域高度为“视口(viewport)高度减去导航条高度”;想要设置页面中某个元素的宽度为另外两个元素的宽度之和;想要防止某些文本的可变font-size值,增长超过一定大小;

在以上场景下,我们就得依靠数学计算来实现了。以前,CSS还未如此强大之时,前端工程师一般是通过结合JavaScript代码动态控制元素样式,来达到目的。但自从有了计算属性值之后,我的老板再也不担心我的JS功底了。

好了,下面就来具体说说“数值计算”函数应该如何使用。

函数语法

selector {   property: calc(expression);}

其中,calc为函数名,后跟英文括号“()”,计算表达式写在括号中间。计算表达式可以用四则运算(加+、减-、乘*、除/)书写。

使用规则和最佳实践加、减运算符前后都要用空格分开;乘除运算符前后可以不加,但为了统一风格,建议加空格;允许calc()函数嵌套,内层calc函数建议为简单写法,不宜太复杂;表示盒模型属性值时,不可以用“0”替代“0px”,如margin-top: calc(0 + 20px);是无效的;乘除的第二个数不能是百分数,但可以是小数,如font-size: calc(1.25rem / 1.25)是可以的,但font-size: calc(1.25rem / 125%)无效函数示例

下面的示例演示了4种用calc()函数设置元素宽度的方式:

div {  background-color: black;  margin: 4px 0;  width: 100%;}div > code {  display: block;  background-color: red;  color: white;  height: 48px;}.calc1 > code {  /* 固定值相加,计算结果:width: `110px` */  width: calc(10px + 100px);}.calc2 > code {  /* 数值相乘,计算结果:width: `10em` */  width: calc(2em * 5);}.calc3 > code {  /* 数值相减,计算结果 width: 取决于容器宽度 */  width: calc(100% - 32px);}.calc4 > code {  --predefined-width: 100%;  /* 混合运算,计算结果:width: 取决于容器宽度 */  width: calc(var(--predefined-width) - calc(16px * 2));}

其中,第四个例子演示了计算函数的高级用法:

“--predefined-width”为变量定义,便于在后文重复引用;calc()函数可以嵌套使用。

好了,calc()函数就介绍到这,打开电脑试试吧!

更多精通CSS的相关精彩文章制作中,敬请期待。欢迎点赞、收藏和转发!

系列文章:

CSS属性值函数(1)概述及语法

标签: #pburg函数怎么用