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

css的calc函数怎么使用?

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

有做前端的同学在问,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))}


dls6.jpg

相关文章

dls6微商城

丁老师网店系统,dls6微商城

php调用美图秀秀插件上传头像

丁老师教你如何用php调用美图秀秀插件实现头像上传的功能。

支付宝手机付款提示ALI59错误的解决办法

支付宝-交易订单处理失败,请稍后再试。(ALI59)的解决办法

百度编辑器ueditor自动添加p标签换行的...

在实际工作中发现,有个编辑器每次保存或者修改后,都会自动在内容顶部和底部增加几行,烦人的很,一直找不到解决办法。后来发现原来是自己代码的问题。解决办法:内容在textarea中,不要换行不要写成:<textarea {content}...

推荐文章

宝塔"在未指定SSL默认站点时,未开启SSL...

宝塔系统相关问题解决方法

uniapp开发小程序内的图片扫码

在使用uniapp开发的小程序内,打开图片,长按没有弹出菜单,无法扫码,此时只需在图片上加入show-menu-by-longpress即可完整代码:<image :src="picture" mode="...

宝塔面板phpmyadmin数据库表导航树禁...

宝塔面板的phpmyadmin,默认数据库表导航树是每30个一页,非常的不直观,可以通过修改宝塔phpmyadmin配置文件的方式来禁止他分页。修改方法:1.进入服务器/www/server/phpmyadmin/phpmyadmin_随机...

低成本的政企软件系统维护服务

开源节流,控制生产成本,限制开销,是每个企业和单位都要采取的成本控制和管理措施。其中,人力成本是企业在经营中支出占比较大的一块。以IT信息化部门为例,一个负责企业软件系统运维的IT部门,至少需要配置3个员工,每个员工按照IT工程师3-5年工...

QQ咨询微信咨询