css的calc函数怎么使用？

所属分类：软件开发来源: 丁老师原创更新时间：2025-02-25 09:57 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))}

上一篇：做网站用H5好还是用VUE好？

下一篇：php区分字符里面中文和英文的方法

在vs code中调试Deno

在vscode中，可以通过配置.vscode/launch.json来debugdeno项目，具体方法如下：1.创建.vscode/launch.json;2.找到<entry_point ，替换为你的script脚本;3.点击F...

checkbox控件页面后退时状态问题解决

问题：在html中，如果checkbox为已选状态，进入下一个页面后再点后退时，该checkbox还是为已选中状态，但是依赖该checkbox选中后的事件却无法执行。解决：这种情况下，对checkbox的input设置autocompl...

uniapp开发微信小程序怎么模拟位置？

废话不多说，直接上货。在微信开发者工具调试栏，找到Sensor（传感器）。Geolocation，勾选启用，下边输入经纬度即可！

在Dart/Flutter中，double....

在Flutter中，double.infinity和double.maxFinite看起来非常的相似，他们的区别是什么，分别在什么情况下使用呢？今天丁老师给你解答。如果从严格的面向数据角度来看，两者的区别在于double.maxFini...

推荐文章

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

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

CSS常用字体及网页引用方式

1.字体列表及引用链接鸿蒙字体-B站400 字重 CSS：//s1.hdslb.com/bfs/static/jinkela/long/font/regular.css500 字重 CSS：//s1.hdslb.com/bfs/static...

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

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

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

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