标签搜索
隐藏侧边栏

CSS中的数学函数- 比较函数min()max()clamp()

搞前端的半夏
2022-04-22 / 0 评论 / 0 点赞 / 160 阅读 / 2,462 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-22,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!

前言

css中有将近102个函数,但是我们所掌握的大概又有多少呢?今天我们先来介绍其中的数学函数,数学函数大概有:

  1. 基本算术:calc()
  2. 比较函数:min()、max()和clamp()
  3. 阶梯值函数:round()、mod()和rem()
  4. 三角函数:sin()、cos()、tan()、asin()、acos()、atan()和atan2()
  5. 指数函数:pow()、sqrt()、hypot()、log()、exp()
  6. 符号相关函数:abs() , sign()

除了这些函数,还有常量是需要记住的:

e , pi,infinity,-infinity,NaN

常量

  1. e是自然对数的底,约等于 2.7182818284590452354
  2. pi是圆的周长与其直径的比值,大约等于 3.1415926535897932。
  3. infinity 代表无穷大,值为 +∞
  4. -infinity 代表无穷小,值为 −∞
  5. NaN值为 NaN

基本算数-calc

calc是英文单词calculate(计算)的缩写,它可以动态计算长度值。

他允许执行基本的算术运算,+),减(- ),乘(*),除(/),和括号。注意》》》 运算符和参数之间要有空格

他也支持文字长度,例如1px ,2em,同时还支持 计算结果是有效参数类型(例如)的 其他数学函数或其他表达式,例如attr(),其。

运算符的标准数学优先级规则适用:calc(2 + 3 * 4) 等于14,而不是20。

括号可用于操纵优先级:calc((2 + 3) * 4)改为等于20。等价于calc(calc(2 + 3) * 4)

举例

  div {
    float: left;
    border: solid 1px;
    width: calc(100% / 3 - 2 * 1em - 2 * 1px);
    height:100px;
  }

我们算一下宽高是如何计算出来的。

102=100+上下border

429.32=1384/3-32-2+左右border

比较函数-min()

min() CSS 方法允许你从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值。min() 方法可以用于以下任何属性中 , , ,

他也支持文字长度,例如1px ,2em,同时还支持 计算结果是有效参数类型(例如)的 其他数学函数或其他表达式,例如calc(),其。

min()是用来限制元素的最大值,类似于max-width/height
类似下面的语法都是支持的:

width: min(5px * 10, 1em);
width: min(calc(5px * 10), 1em);
width: min(5px * 10, var(--width),20em,10px,......);

举例

div {
    float: left;
    border: solid 1px;
    width: min(100px,10em,10vw);
    height:100px;
 }

在移动设备Iphone下,最终元素的宽度只有39.53,

来计算一下:

首先min(100px,10em,10vw)换算成同一个单位的结果是
min(100px,160px,37.5px),

=》最小值就是37.5px,

=》元素宽度也就是37.5px加上两个border,也就是39.5,
=》所以说width最大宽度就是37.5,不会是10px或者160px

在视窗宽度1384px的情况下:最终元素的宽度只有102px。

比较函数-max()

min() CSS 方法允许你从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值。min() 方法可以用于以下任何属性中 , , ,

他也支持文字长度,例如1px ,2em,同时还支持 计算结果是有效参数类型(例如)的 其他数学函数或其他表达式,例如calc(),其。

min()是用来限制元素的最大值,类似于max-width/height
类似下面的语法都是支持的:

width: min(5px * 10, 1em);
width: min(calc(5px * 10), 1em);
width: min(5px * 10, var(--width),20em,10px,......);

举例

div {
    float: left;
    border: solid 1px;
    width: min(100px,10em,10vw);
    height:100px;
 }

在视窗宽度1384px的情况下:最终元素的宽度只有162px。

来计算一下:

首先max(100px,10em,10vw)换算成同一个单位的结果是
max(100px,160px,138.4px),

=》最大值就是160px,

=》元素宽度也就是160px加上两个border,也就是163px,

=》所以说width最小宽度就是160。

在移动设备Iphone下,最终元素的宽度也是162px,

比较函数-clamp()

clamp数有三个计算-最小值,中间值,和最大值=clamp(min, val, max)

返回结果

有点像夹逼定理,仔细看注释理解

if(min<val&& val < max ){
   return val
 }
  if(val<min){
   // clamp( val,min, max),变成了中间值,所以返回中间值
   return min 
 }
  if(val> max ){
   return max
 }

举例

视窗宽度是1400px的。

 div {
        float: left;
        border: solid 1px;
        width: clamp(100px,10em,10vw);
        height:100px;
      }

来计算一下:

clamp(100px,10em,10vw) 等价于clamp(100px,160px,140px)

最终的返回结果是:140px

元素的宽度:140px+左右两个border=142

0

评论区