当前位置：首页 > 科技 > 软件

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

来源：责编：时间：2023-11-08 09:10:15 427观看

导读calc()CSS 的 calc 函数非常实用，很多情况下，我们都会用到这个函数。calc 函数支持加减乘除四种运算，但是，它也有限制：运算符前后带有单位或者百分比的数值，只能进行加减，不能进行乘除运算；比如：width:calc(100px / 50%)，这就是

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

比如这个页面：

<!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

上一篇： Springboot之把外部依赖包纳入Spring容器管理的两种方式

下一篇：探索人工智能的世界：构建智能问答系统之前置篇

标签：

热门焦点

六大权益！华为8月服务日开启：手机免费贴膜、维修免人工费

8月5日消息，一年一度的华为开发者大会2023（Together）日前在松山湖拉开帷幕，与此同时，华为8月服务日也式开启，到店可享六大专属权益。华为用户可在华为商城Ap
CSS单标签实现转转logo

转转品牌升级后更新了全新的Logo，今天我们用纯CSS来实现转转的新Logo，为了有一定的挑战性，这里我们只使用一个标签实现，将最大化的使用CSS能力完成Logo的绘制与动画效果。新logo
一文看懂为苹果Vision Pro开发应用程序

译者 | 布加迪审校 | 重楼苹果的Vision Pro是一款混合现实（MR）头戴设备。Vision Pro结合了虚拟现实（VR）和增强现实（AR）的沉浸感。其高分辨率显示屏、先进的传感器和强大的处理能力
Golang 中的 io 包详解：组合接口

io.ReadWriter// ReadWriter is the interface that groups the basic Read and Write methods.type ReadWriter interface { Reader Writer}是对Reader和Writer接口的组合，
K8S | Service服务发现

一、背景在微服务架构中，这里以开发环境「Dev」为基础来描述，在K8S集群中通常会开放：路由网关、注册中心、配置中心等相关服务，可以被集群外部访问；图片对于测试「Tes」环境或者
三万字盘点 Spring 九大核心基础功能

大家好，我是三友~~今天来跟大家聊一聊Spring的9大核心基础功能。话不多说，先上目录：图片友情提示，本文过长，建议收藏，嘿嘿嘿！一、资源管理资源管理是Spring的一个核心的基础功能，不
英特尔Xe HPG游戏显卡：拥有512EU，单风扇版本

据10 月 30 日外媒 TheVerge 消息报道，英特尔 Xe HPG Arc Alchemist 的正面实被曝光，不仅拥有 512 EU 版显卡，还拥有 128EU 的单风扇版本。另外，这款显卡 PCB
AI艺术欣赏体验会在上海梅赛德斯奔驰中心音乐俱乐部上演

光影交错的镜像世界，虚实幻化的视觉奇观，虚拟偶像与真人共同主持，这些场景都出现在2019世界人工智能大会的舞台上。8月29日至31日，“AI艺术欣赏体验会”在上海
上海举办人工智能大会活动，建设人工智能新高地

人工智能大会在上海浦江两岸隆重拉开帷幕，人工智能新技术、新产品、新应用、新理念集中亮相。8月30日晚，作为大会的特色活动之一的上海人工智能发展盛典人工

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

calc()

min()

clamp()函数

六大权益！华为8月服务日开启：手机免费贴膜、维修免人工费

CSS单标签实现转转logo

一文看懂为苹果Vision Pro开发应用程序

Golang 中的 io 包详解：组合接口

K8S | Service服务发现

三万字盘点 Spring 九大核心基础功能

英特尔Xe HPG游戏显卡：拥有512EU，单风扇版本

AI艺术欣赏体验会在上海梅赛德斯奔驰中心音乐俱乐部上演

上海举办人工智能大会活动，建设人工智能新高地

最新推荐

猜你喜欢

热门推荐

相关资讯