CSS 的 calc 函数非常实用，很多情况下，我们都会用到这个函数。
calc 函数支持加减乘除四种运算，但是，它也有限制：
这就是 calc 函数的基本使用方法，在 CSS 还有几个函数：min()、max()和 clamp()函数。在不能保证目标用户的浏览器是否支持这些函数的时候，就使用固定值兜底，确保在旧版本的浏览器中样式不乱。比如：
html{ font-size: 16px; font-size: clamp(16px, calc(16px + 2 * (100vw - 400px) / 40), 24px)}min()函数的具体语法为：min(expression[, expression])。
min 函数支持一个或者多个表达式，多个表达式的时候，用都好隔开，最后返回最小值，比如：width: min(100px, 230px, 20px)，属性 width 的结果为 20 px。
max()函数和 min 函数语法相似，不同的是 max 函数返回最大值。
clamp 函数返回的是一个区间范围数值，写法是这样：clamp(min, value, max)
min 表示最小值；value 表示首选值；max 表示最大值。clamp 函数的返回值结果有这几种：
比如这个页面：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> button { width: clamp(200px, 50px, 600px); } </style></head><body><button>按钮长度</button></body></html>这个页面中 clamp 函数中 value 小于 min 的值，所以页面中按钮的 width 为 200px。
button { width: clamp(200px, 50vw, 600px);}这样按钮的长度就为 600px 了。有机会我们可以在项目中尝试一下这些新属性和新的写法。
本文链接：http://www.28at.com/showinfo-26-17639-0.htmlCSS这几个函数很实用，也很简单
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号