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

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

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

导读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容器管理的两种方式

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

标签：

热门焦点

一篇聊聊Go错误封装机制

%w 是用于错误包装（Error Wrapping）的格式化动词。它是用于 fmt.Errorf 和 fmt.Sprintf 函数中的一个特殊格式化动词，用于将一个错误（或其他可打印的值）包装在一个新的错误中。使
量化指标是与非：挽救被量化指标扼杀的技术团队

作者 | 刘新翠整理 | 徐杰承本文整理自快狗打车技术总监刘新翠在WOT2023大会上的主题分享，更多精彩内容及现场PPT，请关注51CTO技术栈公众号，发消息【WOT2023PPT】即可直接领取
一文搞定Java NIO，以及各种奇葩流

大家好，我是哪吒。很多朋友问我，如何才能学好IO流，对各种流的概念，云里雾里的，不求甚解。用到的时候，现百度，功能虽然实现了，但是为什么用这个？不知道。更别说效率问题了~下次再遇到，
签约井川里予、何丹彤，单视频点赞近千万，MCN黑马永恒文希快速崛起！

来源：视听观察永恒文希传媒作为一家MCN公司，说起它的名字来，可能大家会觉得有点儿陌生，但是说出来下面一串的名字之后，或许大家就会感到震惊，原来这么多网红，都签约这家公司了。根
年轻人的“职场羞耻感”，无处不在

作者：冯晓亭陶淘李欣张琳马舒叶来源：燃次元“人在职场，应该选择什么样的着装？”近日，在网络上，一个与着装相关的帖子引发关注，在该帖子里，一位在高级写字楼亚洲金
iQOO 11S屏幕细节公布：首发三星2K E6全感屏安卓最好的直屏手机

日前iQOO手机官方宣布，新一代电竞旗舰iQOO 11S将会在7月4日19:00正式与大家见面。随着发布时间的日益临近，官方关于该机的预热也更加密集，截至目前已
引领旗舰级影像能力向中端机普及 OPPO K11 系列发布 1799 元起

7月25日，OPPO正式发布K系列新品—— OPPO K11 。此次 K11 在中端手机市场长期被忽视的影像板块发力，突破性地搭载索尼 IMX890 旗舰大底主摄，支持 OIS
Counterpoint ：OPPO双旗舰战略全面落地高端产品销量增长22%

2023年6月30日，全球行业分析机构Counterpoint Research发布的《中国智能手机高端市场白皮书》显示，中国智能手机品牌正在寻求高质量发展，中国高端智能
苹果140W USB-C充电器：采用氮化镓技术

据10 月 30 日 9to5 Mac 消息报道，当苹果推出新的 MacBook Pro 2021 时，该公司还推出了新的 140W USB-C 充电器，附赠在 MacBook Pro 16 英寸机型的盒子里，也支