CSS3运算 calc()函数是怎么实现计算
web前端开发
共 1568字,需浏览 4分钟
· 2021-05-06
.foo {
width: calc(100px + 50px);
}
为什么是 calc()
如果你使用过 CSS预处理器,比如 SASS,以上示例你或许碰到过。
.foo {
width: 100px + 50px;
}
// Or using SASS variables
$width-one: 100px;
$width-two: 50px;
.bar {
width: $width-one + $width-two;
}
然而,calc() 函数提供了更好的解决方案。首先,我们能够组合不同的单元。特别是,我们可以混合计算绝对单元(比如百分比与视口单元)与相对单元(比如像素)。例如,我们可以创造一个表达式,用一个百分比减掉一个像素值。
.foo {
width: calc(100% - 50px);
}
本例中,.foo 元素总是小于它父元素宽度 50px。 第二,使用 calc(),计算值是表达式它自己,而非表达式的结果。当使用 CSS 预处理器做数学运算时,给定值为表达式的结果。
// Value specified in SCSS
.foo {
width: 100px + 50px;
}
// Compiled CSS and computed value in browser
.foo {
width: 150px;
}
然而,浏览器解析的 calc() 的值为真实的 calc() 表达式。
// Value specified in CSS
.foo {
width: calc(100% - 50px);
}
// Computed value in browser
.foo {
width: calc(100% - 50px);
}
这意味着浏览器中的值可以更加灵活,能够响应视口的改变。我们能够给元素设定一个高度为视口的高度减去一个绝对值,它将随视口的改变进行调节。
使用 calc()
calc() 函数可以用来对数值属性执行四则运算。比如,<length>,<frequency>,<angle>,<time>,<number> 或者 <integer 数据类型 这里有一些示例:
.foo {
width: calc(50vmax + 3rem);
padding: calc(1vw + 1em);
transform: rotate( calc(1turn + 28deg) );
background: hsl(100, calc(3 * 20%), 40%);
font-size: calc(50vw / 3);
}
calc() 函数可以用来对数值属性执行四则运算。比如
.foo {
width: calc( 100% / calc(100px * 2) );
}
函数的计算值如下所示:
.foo {
width: calc( 100% / (100px * 2) );
}
学习更多技能
请点击下方公众号
评论
周鸿祎是真牛逼
最近在各个视频平台,我的推荐信息流上一定会出现红衣教主周鸿祎的身影,俨然是新一代的顶流IP网红,还是自己贼有钱的那种。不得不说,周鸿祎是真牛逼,他是懂得学习的。年初的时候,他就发文:“如今已是网红时代,我现在已经拜了俞敏洪为师,在学习如何当网红,每天勤奋的发短视频”。“有时候也在劝很多亚布力大哥级
公子龙
1
Windows格式化对话框是一个使用了30年的 “临时解决方案”
戴夫-普卢默(Dave Plummer)是微软的资深工程师,曾创造了任务管理器、Windows 弹球、原生 ZIP 支持(微软出钱买断该功能后,他用这笔钱购买了一辆红色克尔维特)等传奇。近日他在自己的 X 账户上分享了创建 "格式化" 对话框的故事 —— 称其是一个使用了长达 30 年的 “临时解决
开源Linux
0
如何计算数据中心的冷却需求?
今日分享 【导读】数据中心的冷却要求受多种因素影响,包括设备的热量输出、占地面积、设施设计和电气系统功率额定值等等……众所周知,环境因素会严重影响数据中心设备。过多的热量积聚会损坏服务器,可能导致其自动关闭。经常在高于可接受的温度下运行服务器会缩短其使用
数据中心运维管理
0
OpenAI的Sora竟然造假:生成的AI大片只有1%的AI,剩下的99%是人工!
点蓝色字关注“机器学习算法工程师”设为星标,干货直达!啊?Sora火爆短片《气球人》,也“造假”了???背后艺术家团队的最新揭秘,可谓一石激起千层浪:原来,视频画面并非完全由AI生成,其中有大量视觉效果需要人类后期实现。be like:这下网友不干了,合着大家伙儿跟OpenAI玩真心,OpenAI背
机器学习算法工程师
1
15种时间序列预测方法总结(包含多种方法代码实现)
向AI转型的程序员都关注了这个号👇👇👇在这篇文章中,我们将深入探讨时间序列预测的基本概念和方法。我们将首先介绍单元预测和多元预测的概念,然后详细介绍各种深度学习和传统机器学习方法如何应用于时间序列预测,包括循环神经网络(RNN)、一维卷积神经网络(1D-CNN)、Transformer、自回归模型(
机器学习AI算法工程
0
SpringBoot 实现图片防盗链功能
程序员的成长之路互联网/程序员/技术/资料共享 关注阅读本文大概需要 4 分钟。来自:blog.csdn.net/weixin_46157208/article/details/138051737前言出于安全考虑,我们需要后端返回的图片只允许在某个网站内展示,不想被爬虫拿到图片地
程序员的成长之路
0
李彦宏:开源大模型不如闭源,后者会持续领先;周鸿祎:“开源不如闭源” 的言论是胡说八道
架构师大咖
架构师大咖,打造有价值的架构师交流平台。分享架构师干货、教程、课程、资讯。架构师大咖,每日推送。
公众号该公众号已被封禁0、李彦宏:开源大模型不如闭源,后者会持续领先当今
源码共读
0
一站式解决方案:基于 Arthas 实现服务发现和权限控制
来源:juejin.cn/post/7281849496983994383👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0 版本完结啦, 演示链接
小哈学Java
0