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

prtyaa 2024-01-07 21:37:03  66045 赞同 0 反对 0

分类：资源标签：运维

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

calc()

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

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

运算符前后带有单位或者百分比的数值，只能进行加减，不能进行乘除运算；比如：width:calc(100px / 50%)，这就是不合法的；
不能使用当前属性不支持数据单位，比如：width:calc(100% – 45deg)，width 属性不支持 deg 单位，因此这样写法是错误的；
calc 函数在进行除法运算的时候，除数不能为 0【也就是除号右边不能为 0】，比如：width:calc(100px / 0)，这样的写法是❎的；
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 函数的返回值结果有这几种：

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

比如这个页面：




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


按钮长度

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

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

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

如果您发现该资源为电子书等存在侵权的资源或对该资源描述不正确等，可点击“私信”按钮向作者进行反馈；如作者无回复可进行平台仲裁，我们会在第一时间进行处理！

评价 0 条

相关资源

PHP时间戳函数实现时间转换和计算功能的方法总结 2024-01-07 65421 浏览
PHP时间戳函数是一种非常常用和强大的功能，它可以用于时间的转换和计算。在这篇文章中，我将总结一下PHP时间戳函数的使用方法和一些相关的注意事项。 PHP时间戳函数主要有两个：time() 和strtotime()。time()函数返回当前的Unix时间戳，即从1970年1月1日00:00:00 GMT到当前时间的秒数。strtotime()函数则用于将字符串转换为时间戳。首先，让我们来看一下time()函数的使用方法。它非常简单，只需要调用该函数即可获得当前的时间戳。例如：
JS 工具函数 2024-01-07 64677 浏览
一些JS 编写的工具函数
统信uos安装app：一种简单的方式来获取更多应用 2024-01-07 64725 浏览
本文目录导读：前言统信uos应用安装方式使用官方应用商店使用命令行工具下载应用程序包注意事项安全性兼容性更新和维护为您分享前言统信uos是一款基于Linux的操作系统，它专为企业用户和政府机构设计，提供了高安全性和稳定性的特性。由于其特殊的定位，统信uos的应用商店相对较少，无法满足所有用户的需求。本文将介绍一种简单的方式来安装更多应用程序，以帮助用户获取更多功能和工具。统信uos应用安装方式统信uos的应用安装方式相对比较简单，您可以通过以下几种方法来安装应用程序：（图片来源网络，侵删） 1. 使用官方应用商店统信uos提供了官方的应用商店，您可以通过它来浏览和安装各种应用程序。打开官方应用商店，您可以在搜索栏中输入关键词，然后浏览结果并选择您想要安装的应用。点击安装按钮即可开始下载和安装。 2. 使用命令行工具对于熟悉命令行操作的用户，可以使用统信uos提供的命令行工具来安装应用程序。打开终端，输入相应的命令，即可下载和安装应用。使用apt-get命令可以安装Debian软件包。
openGauss 数据库窗口函数示例 2024-01-15 65853 浏览
openGauss 数据库窗口函数示例
openGauss系统管理配置设置函数 2024-01-15 64244 浏览
openGauss系统管理配置设置函数
SQL必学必会之窗口函数 2024-01-07 67224 浏览
在SQL中，窗口函数是一种强大的工具，用于在查询结果中执行聚合、排序和分组操作，而不影响原始表的行数。这篇文章将介绍窗口函数的基本概念以及如何使用它们来解决各种数据分析和报告需求。
openGauss 账本数据库函数 2024-01-15 65849 浏览
openGauss 账本数据库函数
VMware中Ubuntu拓展磁盘容量的两种方式 &图形化方式&命令行磁盘分区方式（亲测有效&简单且详细）&linux磁盘分区 2024-01-07 63712 浏览
前言在用VMware虚拟机的情况下，一开始分配的容量在使用过程中，出现不够的情况。针对这种情况，如何拓展磁盘容量？
Linux：gdb的简单使用 2024-01-07 65663 浏览
前言 gdb是Linux中的调试代码的工具
如何通过php函数优化数据加密和解密的性能？ 2024-01-07 65739 浏览
如何通过PHP函数优化数据加密和解密的性能？随着互联网的发展，数据的加密和解密显得越来越重要。在使用PHP语言进行数据加密和解密时，我们需要考虑数据加密算法的复杂性和性能。本文将介绍如何通过PHP函数优化数据加密和解密的性能，并提供具体的代码示例供参考。

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

calc()

min()

clamp()函数

相关资源

关注我们