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

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

相关文章

Android Kotlin文件转换为Jav...

AndroidKotlin文件可以转换为Java文件,方法为:点击菜单Menu Tools Kotlin ShowKotlinBytecode点击编译Decompile按钮复制Java代码,完成!

PHP网页报DOMDocument::loa...

PHP网站,网页打开不正常,显示“DOMDocument::loadHTML():TagheaderinvalidinEntity”错误代码,是怎么回事呢?其实,这是php程序中,使用了newDOMDocument的loadHTML来解析远...

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

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

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

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

推荐文章

fastadmin add/edit方法不更...

问题:fastadmin的add/edit方法无法保存数据,检查了页面,name=row['name']正常传送,检查controller,也是默认的方法,什么也没有动可就是无法保存数据。解决:经过仔细研究发现,原来是htm...

Hbuilder开发APP时,找不到真机的解...

正确的USB连线,其次打开开发者选项、USB调试,这些都是老生常谈,就不说了。在确保以上操作无误后,如果还找不到真机,关闭IDE,然后去adb的目录下,即HBuilderX\plugins\launcher\tools\adbs,把adb....

小程序/APP定制开发价格标准价目表

.table_list.name{width:200px;}.table_list.price{width:150px;}.table_list.memo{flex:1;}@mediascreenand(max-width:1024px){...

性价比最高的内网穿透方案

内网穿透,是指外网可以访问内网,没有固定IP的服务器,所以需要中间件来进行通讯,目前稳定成熟的中间件软件,要么价格太贵,要么就是只能使用标准服务,不能完全的定制化。那么,到底有没有一个性价比最优的方案呢?回答是肯定的,答案就是使用云服务器+...

QQ咨询微信咨询