有做前端的同学在问,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微商城
丁老师教你如何用php调用美图秀秀插件实现头像上传的功能。
支付宝-交易订单处理失败,请稍后再试。(ALI59)的解决办法
在实际工作中发现,有个编辑器每次保存或者修改后,都会自动在内容顶部和底部增加几行,烦人的很,一直找不到解决办法。后来发现原来是自己代码的问题。解决办法:内容在textarea中,不要换行不要写成:<textarea {content}...
宝塔系统相关问题解决方法
在使用uniapp开发的小程序内,打开图片,长按没有弹出菜单,无法扫码,此时只需在图片上加入show-menu-by-longpress即可完整代码:<image :src="picture" mode="...
宝塔面板的phpmyadmin,默认数据库表导航树是每30个一页,非常的不直观,可以通过修改宝塔phpmyadmin配置文件的方式来禁止他分页。修改方法:1.进入服务器/www/server/phpmyadmin/phpmyadmin_随机...
开源节流,控制生产成本,限制开销,是每个企业和单位都要采取的成本控制和管理措施。其中,人力成本是企业在经营中支出占比较大的一块。以IT信息化部门为例,一个负责企业软件系统运维的IT部门,至少需要配置3个员工,每个员工按照IT工程师3-5年工...