前言:
眼前同学们对“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函数怎么用