有趣的 CSS 数学函数

CUGGZ 2023-03-28 原文

CSS 数学函数允许在 CSS 属性值中执行数学表达式。CSS 数学函数仅支持加法（+）、减法（-）、乘法（*）、除法（/）。目前在 CSS 中有四个得到很好支持的数学函数：

min()：该函数允许你从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值；
max()：该函数可以从一个逗号分隔的表达式列表中选择最大（正方向）的值作为属性的值；
calc()：该函数允许在声明 CSS 属性值时执行一些计算；
clamp()：该函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。

这些 CSS 函数可能会以意想不到的方式使用，例如在渐变和颜色函数中以及与 CSS 自定义属性结合使用。下面就来看看这 4 个 CSS 函数！

1. calc()

基本使用

calc() 函数有助于在 CSS 属性值中执行计算。它可以用在如下属性中：length、frequency、angle、time、percentage、number、integer。

width: calc(100% - 80px);

calc() 函数用一个表达式作为它的参数，用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合（+、-、*、/），采用标准操作符处理法则的简单表达式。表达式中的运算对象可以使用任意长度的值。如果你愿意，甚至可以在一个表达式中混用这类值的不同单位。在需要时，还可以使用小括号来建立计算顺序。

该函数具有广泛的用途，例如，如果希望某些内容占据大部分视口高度。这时就可以使用相对的单位vh和绝对单位px进行混合计算：

.content {
  height: calc(100vh - 60px);
}

当视口大小发生变化或者用户使用较大或较小的设备时，100vh的值将动态更新，因此计算也将动态更新。使用calc() 的好处在于，它既可以避免添加一些 magic number，也可以避免使用 JavaScript 来计算样式的属性值。

生成调色板

我们可以通过传入CSS自定义属性来扩展 calc() 的功能。一个非常有用的例子就是使用 hsl() （表示色调、饱和度和亮度）来创建一致的调色板。给定饱和度、亮度和起始色调的值，就可以使用 calc() 函数计算互补值来构建完整的调色板。

.colors {
  --base-hue: 140;
  --saturation: 95%;
  --lightness: 80%;
  --rotation: 60;

  color: #222;
  text-align: center;
}

.color {
  padding: 0.25rem;
  background-color: hsl(var(--hue), var(--saturation), var(--lightness));
}

.color1 {
  --hue: calc(var(--base-hue));
}

.color2 {
  --hue: calc(var(--base-hue) + var(--rotation));
}

.color3 {
  --hue: calc(var(--base-hue) + var(--rotation) * 2);
}

生成的调色板：

注意事项

在使用 calc() 函数时需要注意：

+ 和 - 运算符的两边必须要有空白字符。比如，calc(50% -8px) 会被解析成为一个无效的表达式，解析结果是：一个百分比后跟一个负数长度值。而加有空白字符的、有效的表达式 calc(8px + -50%)会被解析成为：一个长度后跟一个加号再跟一个负百分比。

和 / 这两个运算符前后不需要空白字符，但如果考虑到统一性，仍然推荐加上空白符。

用 0 作除数会使 HTML 解析器抛出异常。
涉及自动布局和固定布局的表格中的表列、表列组、表行、表行组和表单元格的宽度和高度百分比的数学表达式，auto 可视为已指定。
calc() 函数支持嵌套，但支持的方式是：把被嵌套的 calc() 函数全当成普通的括号。所以，函数内直接用括号就好了。

浏览器兼容性

clac() 函数在这四个函数中具有最好的跨浏览器支持：

2. clamp()

基本使用

clamp() 的实际用途：在可接受的值范围内设置边界。clamp() 被用在 length、frequency、angle、time、percentage、number、integer 属性中。其语法如下：

clamp(MIN, VAL, MAX)

clamp(MIN, VAL, MAX) 其实就是表示 max(MIN, min(VAL, MAX))。clamp() 函数接收三个用逗号分隔的表达式作为参数，按最小值、首选值、最大值的顺序排列，这三个值得顺序很重要。

当首选值比最小值要小时，则使用最小值。
当首选值介于最小值和最大值之间时，用首选值。
当首选值比最大值要大时，则使用最大值。

这个表达式可以是数学函数、字面量或其它计算为有效的参数类型表达式，如 attr()，或嵌套的 min 和 max 。作为数学表达式，可以使用加减乘除运算而无需使用 calc() 函数。也可以用括号来确定计算顺序。表达式中的每一个值都可以用不同的单位。

来看下面的例子：

.element {
  width: clamp(200px, 50%, 1000px);
}

有一个元素，其最小宽度为200px，首选值为50%，最大值为1000px。

这个元素的宽度永远不会低于200px，首选值是50%并且仅在视口宽度大于400px和小于2000px 时才有效，宽度不会超过1000px。

那 clamp() 是如何计算的呢？当 clamp() 用作值时，它等同于使用max()和min()函数：

.element {
  width: clamp(200px, 50%, 1000px);
  width: max(200px, min(50%, 1000px));
}

这里的50%取决于浏览器视口宽度，假设视口宽度为1150px，解析的过程如下：

1. width: max(200px, min(50%, 1000px));
2. width: max(200px, min(575px, 1000px));
3. width: max(200px, 575px);
4. width: 575px;

边框和阴影

有时需要边框宽度和半径应该在移动设备上更小，通过使用 clamp() 就可以根据视口宽度来使它们动态变化。

.element {
  box-shadow: 0 3px 10px 0 red;
  border: min(1vw, 10px) solid #468eef;
  border-radius: clamp(7px, 2vw, 20px);
  box-shadow: 0 3px clamp(5px, 4vw, 50px) 0 rgba(0, 0, 0, 0.2);
}

Grid 间隙

当使用 CSS Grid 布局时设置网格间隙，并且希望为移动视口缩小间隙。就可以使用 clamp()：

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: clamp(1rem, 2vw, 24px);
}

注意事项

允许设置表达式的值为 max() 和 min() 。这些表达式是数学表达式，所以你可以进行加减乘除运算。
表达式可以是使用标准运算符优先规则组合 + 、- 、* 、/ 等运算符的值，确保在 + 、- 两侧各有一个空格。表达式中的操作数可以是长度值。可以给每一个值设置不同的单位。还可以用括号来确定计算顺序。

浏览器兼容性

3. min()

基本使用

min() 函数方法接受一个或多个用逗号分隔的表达式作为他的参数，数值最小的表达式的值将会作为指定的属性的值。

min() 的实际用途：以包含元素响应上下文的方式，在最大允许值上设置边界。尽管是 min() 函数，但结果是提供的值将作为属性允许的最大值。

下面来看一个简单的例子，希望元素的最大宽度为500px：

.element {
  width: min(50%, 500px);
}

浏览器必须选择最小的值（50%，500px）。选择该选项取决于视口宽度。如果50%的计算值大于500px，那么它将被忽略，而使用500px。否则，如果50%的计算值小于500px，则50%将用作宽度值。视口宽度为1000px：

容器宽度

有一个容器的宽度是其父级宽度的80%，并且宽度不应超过780px，那么该如何写：

.container {
  max-width: 780px;
  width: 80%;
}

如果使用 min() 函数，就可以这样设置最大值，代码简洁了很多：

.container {
  max-width: min(80%, 780px);
}

平滑渐变

在 CSS 中使用渐变时，可能需要通过使颜色之间的过渡更平滑一些来针对移动设备进行一些调整。来看一个例子：

.element {
  background: linear-gradient(135deg, #2c3e50, #2c3e50 60%, #3498db);
}

在移动设备中，这个颜色渐变就会有一条分割线，不是很好看。可以通过媒体查询来解决这个问题：

@media (max-width: 700px) {
  .element {
    background: linear-gradient(135deg, #2c3e50, #2c3e50 25%, #3498db);
  }
}

虽然这样是可行的，但我们可以使用CSS 中的 min() 函数使这个颜色渐变更加动态：

.element {
  background: linear-gradient(135deg, #2c3e50, #2c3e50 min(20vw, 60%), #3498db);
}

这样颜色渐变就看起来顺滑了很多：

注意事项

表达式中的操作数可以是任何长度值。表达式中的每个值可以使用不同的单位。必要时，还可以使用括号来确定计算顺序。
通常需要组合 min()和 max()的值，或者在 clamp() 或 calc() 函数中使用 min()。
如果需要应用多个长度约束，则可以提供两个以上的参数。

浏览器兼容性

4. max()

基本使用

max() 函数方法接受一个或多个用逗号分隔的表达式作为他的参数，数值最大的表达式的值将会作为指定的属性的值。

max() 的实际用途：以包含元素响应上下文的方式，在最小允许值上设置边界。

下面来看一个简单的例子，通常，页面的侧边栏有一个固定的宽度，而主宽度是灵活大小的。如果视口足够大，可以使侧边栏更具动态性以占用更多空间。为此，需要使用 max() 函数为其设置最小宽度。

.wrapper {
  display: flex;
}

aside {
  flex-basis: max(30vw, 150px);
}

main {
  flex-grow: 1;
}

侧边栏的最小宽度为150px，如果视口宽度大于500px（500*30%=150），则最小宽度为30vw。

浏览器兼容性

参考资料

[1] https://moderncss.dev/practical-uses-of-css-math-functions-calc-clamp-min-max

[2] https://ishadeed.com/article/css-min-max-clamp/

有趣 CSS span style color 开发前端 $CSS 数学函数

有关有趣的 CSS 数学函数的更多相关文章

ruby - capybara field.has_css?匹配器 - 2
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？最佳答案通过JonasNicklas得到了答案:No
ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2
我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re
ruby-on-rails - 在 ruby 中使用 gsub 函数替换单词 - 2
我正在尝试用ruby中的gsub函数替换字符串中的某些单词，但有时效果很好，在某些情况下会出现此错误？这种格式有什么问题吗NoMethodError(undefinedmethod`gsub!'fornil:NilClass):模型.rbclassTest"replacethisID1",WAY=>"replacethisID2andID3",DELTA=>"replacethisID4"}end另一个模型.rbclassCheck 最佳答案啊，我找到了!gsub!是一个非常奇怪的方法。首先，它替换了字符串，所以它实际上修改了
ruby - 在 Ruby 中有条件地定义函数 - 2
我有一些代码在几个不同的位置之一运行:作为具有调试输出的命令行工具，作为不接受任何输出的更大程序的一部分，以及在Rails环境中。有时我需要根据代码的位置对代码进行细微的更改，我意识到以下样式似乎可行:print"Testingnestedfunctionsdefined\n"CLI=trueifCLIdeftest_printprint"CommandLineVersion\n"endelsedeftest_printprint"ReleaseVersion\n"endendtest_print()这导致:TestingnestedfunctionsdefinedCommandLin
css - 用 watir 检查标签类？ - 2
我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。最佳答案试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes
ruby - 在 Ruby 中按名称传递函数 - 2
如何在Ruby中按名称传递函数？(我使用Ruby才几个小时，所以我还在想办法。)nums=[1,2,3,4]#Thisworks,butismoreverbosethanI'dlikenums.eachdo|i|putsiend#InJS,Icouldjustdosomethinglike:#nums.forEach(console.log)#InF#,itwouldbesomethinglike:#List.iternums(printf"%A")#InRuby,IwishIcoulddosomethinglike:nums.eachputs在Ruby中能不能做到类似的简洁？我可以只
C51单片机——实现用独立按键控制LED亮灭（调用函数篇） - 2
说在前面这部分我本来是合为一篇来写的，因为目的是一样的，都是通过独立按键来控制LED闪灭本质上是起到开关的作用，即调用函数和中断函数。但是写一篇太累了，我还是决定分为两篇写，这篇是调用函数篇。在本篇中你主要看到这些东西！！！1.调用函数的方法（主要讲语法和格式）2.独立按键如何控制LED亮灭3.程序中的一些细节（软件消抖等）1.调用函数的方法思路还是比较清晰地，就是通过按下按键来控制LED闪灭，即每按下一次，LED取反一次。重要的是，把按键与LED联系在一起。我打算用K1来作为开关，看了一下开发板原理图，K1连接的是单片机的P31口，当按下K1时，P31是与GND相连的，也就是说，当我按下去时
ruby-on-rails - 将字符串转换为 ruby-on-rails 中的函数 - 2
我需要一个通过输入字符串进行计算的方法，像这样function="(a/b)*100"a=25b=50function.something>>50有什么方法吗？最佳答案您可以使用instance_eval:function="(a/b)*100"a=25.0b=50instance_evalfunction#=>50.0请注意，使用eval本质上是不安全的，尤其是当您使用外部输入时，因为它可能包含注入(inject)的恶意代码。另请注意，a设置为25.0而不是25，因为如果它是整数a/b将导致0(整数)。
ruby - 在 ruby 中使用 .try 函数和 .map 函数 - 2
我需要从json记录中获取一些值并像下面这样提取curr_json_doc['title']['genre'].map{|s|s['name']}.join(',')但对于某些记录，curr_json_doc['title']['genre']可以为空。所以我想对map和join()使用try函数。我试过如下curr_json_doc['title']['genre'].try(:map,{|s|s['name']}).try(:join,(','))但是没用。最佳答案你没有正确传递block。block被传递给参数括号外的方法
ruby - 是否可以从也在该模块中的类内部调用模块函数 - 2
在这段Ruby代码中:ModuleMClassC当我尝试运行时出现“'M:Module'的未定义方法'helper'”错误c=M::C.new("world")c.work但直接从另一个类调用M::helper("world")工作正常。类不能调用在定义它们的同一模块中定义的模块函数吗？除了将类移出模块外，还有其他解决方法吗？最佳答案为了调用M::helper，你需要将它定义为defself.helper;结束为了进行比较，请查看以下修改后的代码段中的helper和helper2moduleMclassC

有趣的 CSS 数学函数

1. calc()

基本使用

生成调色板

注意事项

浏览器兼容性

2. clamp()

基本使用

字体大小

边框和阴影

Grid 间隙

注意事项

浏览器兼容性

3. min()

基本使用

容器宽度

平滑渐变

注意事项

浏览器兼容性

4. max()

基本使用

浏览器兼容性

参考资料

有关有趣的 CSS 数学函数的更多相关文章

随机推荐