CSS这几个函数很实用，也很简单

calc()

CSS 的 calc 函数非常实用，很多情况下，我们都会用到这个函数。

成都网站建设哪家好，找创新互联公司！专注于网页设计、成都网站建设公司、微信开发、微信小程序、集团企业网站制作等服务项目。核心团队均拥有互联网行业多年经验，服务众多知名企业客户；涵盖的客户类型包括：除甲醛等众多领域，积累了大量丰富的经验，同时也获得了客户的一致赞扬！

calc 函数支持加减乘除四种运算，但是，它也有限制：

1. 运算符前后带有单位或者百分比的数值，只能进行加减，不能进行乘除运算；比如：width:calc(100px / 50%)，这就是不合法的；
2. 不能使用当前属性不支持数据单位，比如：width:calc(100% - 45deg)，width 属性不支持 deg 单位，因此这样写法是错误的；
3. calc 函数在进行除法运算的时候，除数不能为 0【也就是除号右边不能为 0】，比如：width:calc(100px / 0)，这样的写法是的；
4. calc 函数里面的运算符号两边一定有空，才能进行运算【乘法和除法没有这个限制，但是为了格式一致，要养成好习惯，都加上空格】；

这就是 calc 函数的基本使用方法，在 CSS 还有几个函数：min()、max()和 clamp()函数。在不能保证目标用户的浏览器是否支持这些函数的时候，就使用固定值兜底，确保在旧版本的浏览器中样式不乱。比如：

html{
    font-size: 16px;
    font-size: clamp(16px, calc(16px + 2 * (100vw - 400px) / 40), 24px)
}

min()

min()函数的具体语法为：min(expression[, expression])。

min 函数支持一个或者多个表达式，多个表达式的时候，用都好隔开，最后返回最小值，比如：width: min(100px, 230px, 20px)，属性 width 的结果为 20 px。

max()函数和 min 函数语法相似，不同的是 max 函数返回最大值。

clamp()函数

clamp 函数返回的是一个区间范围数值，写法是这样：clamp(min, value, max)

min 表示最小值；value 表示首选值；max 表示最大值。clamp 函数的返回值结果有这几种：

1. 如果value 的值 min~max 之间，那么 clamp 返回 value；
2. 如果 value 大于 max，则返回 max；
3. 如果 value 小于 min，则返回 min

比如这个页面：

    
    
    


按钮长度

这个页面中 clamp 函数中 value 小于 min 的值，所以页面中按钮的 width 为 200px。

button {
    width: clamp(200px, 50vw, 600px);
}

这样按钮的长度就为 600px 了。有机会我们可以在项目中尝试一下这些新属性和新的写法。

标题名称：CSS这几个函数很实用，也很简单
本文URL：http://www.shufengxianlan.com/qtweb/news7/481907.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联