首页 > 原创文章 > 软件开发 > 查看文章

css的calc函数怎么使用?

所属分类:软件开发 来源: 丁老师原创 更新时间:2025-02-25 09:57 浏览: 1057 IP属地: 深圳
点击阅读全文

有做前端的同学在问,css的calc函数到底怎么使用啊,一直搞不清楚,糊里糊涂的,丁老师你能给我讲解一下吗?
其实,calc是css样式表中,一个非常简单的函数,是计算数值用的,常用来作为宽度、高度等长度单位来使用。

例子一,宽度自适应,两边保持20px的间距:

.hello {width:calc(100% - 40px);}


例子二,高度自适应,距离顶部20px的距离:

.hello {height:calc(100% - 20px);}


例子三,字体大小为3vw(宽度)+2像素:

.hello {font-size:calc(3vw + 2px);}


例子四,区块按照百分比5等分:

.hello {width:calc(100% / 5);}


例子五,设置匹配宽度大于40rem:

@media (min-width:calc(40rem + 1px)) {
  
}


例子六,calc函数中包含其他函数:

.hello {width:calc(100px * sin(pi / 2))}


相关文章

uniapp开发微信小程序时,微信开发者工具...

在使用uniapp开发微信小程序,微信开发者工具调试时,明明已经给了获取位置权限,但还是提示需要打开gps获取位置,具体解决办法如下:打开uniapp的manifest.json文件,切换到源码模式,找到mp-weixin节点"...

html网页调用打开微信小程序白屏的问题解决...

最近好多学员在问,自己开发的小程序,需要用html网页打开,按照网上的教程,没有一个成功的,希望丁老师帮助下。我说没问题,然后去网上看了一下,关于使用h5打开微信小程序这个问题,全部都是只言片语,没有一篇完整的内容,大家把各种代码东拼西...

idea storm换行自动显示的}括号如何...

在使用idea旗下的产品,如intellijidea,phpstorm,webstorm时,有的时候编辑前端页面JS,在换行时经常会自动出现个}大括号,这一点程序不是很智能,其实后边都已经有括号了。比如下图这样:那么如何解决这个问题呢?...

android store文件key生成方法

一、生成打开cmd,切换到jdk所在目录,如d:set PATH=%PATH%;"D:\Program Files\Java\jre1.8.0_301\bin"keytool -genkey -alias dengj...

推荐文章

uniapp开发小程序和app时,根据登录状...

在使用uniapp开发app和小程序时,经常会用到打开app/小程序时,根据登录状态判断是显示首页还是跳转登录页的功能。此功能在app.vue的onlaunch方法中定义,方法如下:onLaunch: function() {const _...

CI框架页面添加全局变量的方法

CI框架是一款很小却又非常强大的PHP程序框架,非常适合用来搭建中小型网站以及扩展程序。有同学问到,在使用CI框架时,比如要对全站的标题、公司信息、电话等设置一个全局变量,不用每个页面都写死,该怎么办呢?丁老师来教你:1.打开页面的控制器文...

photoshop宽度像素和网页宽度像素不一...

在用photoshop设计时,有的同学会发现,在网页中设置的宽度1000px,截屏后,再用photoshop打开后测量同样图像的宽度时,这个宽度就不是1000像素,而是1200多甚至1300多,是个很奇怪的问题,丁老师检查了photosho...

php拼装sql语句,换行查询出错的问题解决

在php代码中,遇到复杂的sql语句,需要拼装sql语句,如:$sql='id 10;'$sql=' and (status in(1,2,3,4,5) andid not in (select id from aa...