“用 40 亿条 if 语句，只为判断一个数字是奇是偶？”

译 | 郑丽媛

出品 | CSDN（ID：CSDNnews）

看到这个标题，相信大多数人的第一反应是：真的有人用 40 亿条 if 语句，只为判断一个数字是奇数还是偶数？的确有，这个开发者名为 Andreas Karlsson，他还把整个过程都整理成文了。

或许由于这“40 亿条 if 语句”听起来实在震撼，Andreas Karlsson 分享的这篇文章在 Hacker News 上很快引起了极大的关注和讨论，而他在文中也直白表示：其实这个想法，最初源于一个充满恶评的短视频。

以下为译文：

大于 11 的数字，没有输出结果

我最近在火车上刷手机时，偶然发现了上面这个截图：“写了一个程序，来判断一个数字是偶数还是奇数。”点开评论区，果然是一连串的恶意评论，多数都在嘲笑这位新手程序员的稚嫩和无知，竟企图以这种方式解决计算机科学中的经典问题“取模运算”。

可看过截图中的代码和网友评论后，我莫名生出了一些不同的想法：现在，AI 正在分分钟取代程序员、抢走他们的饭碗，并彻底改变了我们对代码的思考方式，或许我们应该更加开放地接受这个行业新生代的思想？

其实仔细想来，上述代码是时间和空间的一种完美权衡：你在付出自己时间的同时，也换来了计算机的内存和时间——这难道不是一个神奇的算法吗？

于是，我开始探索这种只使用比较来判断一个数字是奇数还是偶数的想法，看看它在实际情况中的效果到底如何。由于我是一位高性能代码的忠实拥护者，因此我决定用 C 语言来实现这个想法。

然后，我就开始编码了：

```
/* Copyright 2023. All unauthorized distribution of this source code  will be persecuted to the fullest extent of the law*/#include <stdio.h>#include <stdint.h>#include <stdlib.h>int main(int argc, char* argv[]){ uint8_t number = atoi(argv[1]); // No problems here if (number == 0) printf("even\n"); if (number == 1) printf("odd\n"); if (number == 2) printf("even\n"); if (number == 3) printf("odd\n"); if (number == 4) printf("even\n"); if (number == 5) printf("odd\n"); if (number == 6) printf("even\n"); if (number == 7) printf("odd\n"); if (number == 8) printf("even\n"); if (number == 9) printf("odd\n"); if (number == 10) printf("even\n");}
```
接下来，我们要编译这段代码，使用 /Od 禁用优化，确保烦人的编译器不会干扰我们的算法。编译完成后，我们就可以对程序进行快速测试，看看结果如何：
- ```
PS > cl.exe /Od program.cPS > .\program.exe 0 evenPS > .\program.exe 4evenPS > .\program.exe 3oddPS > .\program.exe 7odd
```
  结果显示：0、4 是偶数，3、7 是奇数。这么看来，程序似乎运行得挺好，但在进一步测试后，我发现了一些问题：
  - PS > .\program.exe 50PS > .\program.exe 11PS > .\program.exe 99
    大于 11 的数字没有输出，看来这个程序只对 11 以下的数字有效！回到原始代码中，可以发现问题出在最后一个 if 语句之后：我们需要更多的 if 语句！
    向 32 位（32-bit）数扩展
    这件事进行到这里，就需要我在时间和内存之间做出权衡了。考虑到我的寿命有限，我决定用另一种编程语言对 if 语句进行元编程。为了弥补这种“作弊”行为，我决定用“地球上速度最慢”的语言 Python。
    print("/* Copyright 2023. All unauthorized distribution of this source code")print(" will be persecuted to the fullest extent of the law*/")print("#include <stdio.h>")print("#include <stdint.h>")print("#include <stdlib.h>")print("int main(int argc, char* argv[])")print("{")print(" uint8_t number = atoi(argv[1]); // No problems here")for i in range(2**8): print(" if (number == "+str(i)+")") if i % 2 == 0: print(" printf(\"even\n\");") else: print(" printf(\"odd\n\");")print("}")
    好了！现在我们可以生成一个程序，解决所有 8 位（8-bit）整数的奇偶问题！
    PS > python programmer.py > program.cPS > cl.exe /Od program.cPS > .\program.exe 99oddPS > .\program.exe 50evenPS > .\program.exe 240evenPS > .\program.exe 241odd
    看看，这个效果简直完美！现在，让我们把它放大到 16 位（16-bit）！
    print(" uint16_t number = atoi(argv[1]); // No problems here")…for i in range(2**16):
    这样就得到了一个约 13 万行、超长且漂亮的 c 文件。回顾了一下我多年工作所做的一些代码库，这其实不算什么。话不多说，开始编译！
    PS > python programmer.py > program.cPS > cl.exe /Od program.cPS > .\program.exe 21000evenPS > .\program.exe 3475 oddPS > .\program.exe 3 oddPS > .\program.exe 65001oddPS > .\program.exe 65532even
    太棒了，我们的算法似乎能够处理大量数据！可执行文件大约只有 2 MB，但这与我拥有高达 31.8 GB 内存的强大游戏设备相比，简直不值一提。
    但众所周知，32 位（32-bit）才是计算机领域的终极目标，也是我们解决所有实际工程和科学问题所需的最终位宽。毕竟，在 IPv4 因所谓的 "地址耗尽 "而被认为过时 60 年后，它如今仍然很强大。所以，让我们来看看最终的规模：32 位的数字是 16 位的 65536 倍，这会有什么问题吗？
    print(" uint32_t number = atoi(argv[1]); // No problems here")…for i in range(2**32):
    于是，我让强大的 Python 开始它的工作。48 小时后，我喝了一杯咖啡，然后回来检查程序，就得到了一个美丽的 c 文件，大小接近 330 GB！我几乎可以肯定，这是历史上最大的 c 文件之一。当我输入下一条命令时，我的手指都在颤抖，我猜 MSVC 肯定从未遇到如此强大的源代码。
    在我那台可怜而强大的电脑页面文件中遭受半小时的折磨后，输出如下：
    PS > cl /Od program.cMicrosoft (R) C/C++ Optimizing Compiler Version 19.32.31329 for x64Copyright (C) Microsoft Corporation. All rights reserved.program.cprogram.c(134397076): warning C4049: compiler limit: terminating line number emissionprogram.c(134397076): note: Compiler limit for line number is 16777215program.c(41133672): fatal error C1060: compiler is out of heap space
    太令人失望了！不仅编译器让我失望，在研究 Windows 可移植可执行文件格式（.exe）的限制时，我发现它无法处理超过 4GB 的文件！由于需要将 40 多亿次比较语句编码到可执行文件中，这对于实现我们的算法是一个主要障碍。即使每次比较时使用的字节数少于一个，对我来说工作量也太大了。
    不过，糟糕的编译器和文件格式不应该阻止我们实现梦想。毕竟，编译器所做的只是将一些花哨的机器代码写入文件，而文件格式只是一些结构，告诉操作系统如何将二进制代码放入内存——其实，我们自己就能做到。
    解决最后一个问题，程序性能很不错
    让我们先用 x86-64 汇编语言编写一个 IsEven 函数，因为这是我 Intel 处理器驱动的本地语言，它看起来是这样的：
    ; Argument is stored in ECX, return value in EAXXOR EAX, EAX ; Set eax to zero (return value for odd number)CMP ECX, 0h ; Compare arg to 0 JNE 3h ; Skip next two instructions if it wasn't equalINC EAX ; It was even, set even return value (1)RET ; ReturnCMP ECX, 1h ; Compare arg to 1JNE 2 ; Skip next instruction if not equalRET ; Odd return value already in EAX, just RET; add the next 2...2^32-1 comparisons hereRET ; Fallback return
    这并不是真正正确的汇编代码，但这不重要，因为我们要手动将其编译成机器代码。
    你问我是怎么做到的？我上网查阅了x86(-64) 体系结构手册，还利用我早年编写仿真器和黑客经验，找出了每条指令的正确操作码和格式……开个玩笑，这是不可能的。实际上，我是直接问 ChatGPT 每条指令的正确操作码是什么，幸运的是，它也没有产生 x86-64 的任何新扩展。
    所以现在我们只需编写一个“编译器”来输出这段代码。请注意，我们将直接使用从 AI 获取的指令操作码，下面是用 Python 编写的代码：
    import structwith open('isEven.bin', 'wb') as file: file.write(b"\x31\xC0") # XOR EAX, EAX for i in range(2**32): ib = struct.pack("<I", i) # Encode i as 32 bit little endian integer file.write(b"\x81\xF9" + ib) # CMP ECX, i if i%2 == 0: file.write(b"\x75\x03") # JNE +3 file.write(b"\xFF\xC0") # INC EAX file.write(b"\xC3") # RET else: file.write(b"\x75\x01") # JNE +1 file.write(b"\xC3") # RET file.write(b"\xC3") # Fallback RET
    虽然我们在一定程度上偏离了开头 TikTok 帖子的最初构想，但本质并没有改变：我们创建了一个非常长的 if 语句列表，用于确定某个数字是奇数还是偶数，并忽略了任何有助于简化问题的算术运算。
    运行这个程序后，我们就得到了一个 40GB 的文件，其中包含了确定 32 位数字是偶数还是奇数所需的全部 42 亿次比较！现在，我们只需编写能够加载和使用这些指令的主程序。为了提高性能（这一点非常重要），我决定将文件映射到地址空间，而非一次性读取全部文件。这样，我们就可以假装整个文件已经在内存中，让可怜的操作系统来处理将一个 40GB 的 Blob 装入虚拟内存的问题。用 READ 和 EXECUTE 权限映射文件后，我们就可以使用函数指针调用代码了，代码如下：
    #include <stdio.h>#include <Windows.h>#include <stdint.h>int main(int argc, char* argv[]){ uint32_t number = atoi(argv[1]); // No problems here // Open code file HANDLE binFile = CreateFileA( "isEven.bin", GENERIC_READ | GENERIC_EXECUTE, FILE_SHARE_READ, , OPEN_EXISTING, FILE_ATTRIBUTE_NORMAL, ); // Get 64 bit size of file LARGE_INTEGER codeSize; GetFileSizeEx(binFile, &codeSize); // Create memory map of the file HANDLE mapping = CreateFileMapping( binFile, , PAGE_EXECUTE_READ, 0, 0, ); // Get a pointer to the code LPVOID code = MapViewOfFile( mapping,FILE_MAP_EXECUTE | FILE_MAP_READ, 0, 0, codeSize.QuadPart); // Create a function that points to the code int (*isEven)(int) = (int(*)(int))code; if (isEven(number)) printf("even\n"); else printf("odd\n"); CloseHandle(binFile);}
    就是这样！现在我们已经具备了判断任何 32 位（32-bit）数字是奇是偶的所有功能，让我们试一试：
    PS >.\program.exe 300evenPS >.\program.exe 0evenPS >.\program.exe 1000000evenPS >.\program.exe 100000007oddPS >.\program.exe 400000000evenPS >.\program.exe 400000001oddPS >.\program.exe 400000006evenPS >.\program.exe 4200000000odd <---- WRONG!
    差不多了！似乎算法在符号性方面有问题，任何超过 2^31 的值似乎都会给出随机结果。那么，让我们来修复最后一个错误：原来 atoi 不能处理无符号性，所以它无法解析大数字。用 strtoul 代替它就能解决所有问题。
    uint32_t number = strtoul(argv[1], , 10);// No problems here
    PS >.\program.exe 4200000000evenPS >.\program.exe 4200000001odd
    顺便提一句，这个程序的性能很不错。对于小数字，结果能即时返回，而对于接近 2^32 极限的大数字，结果仍能在大约 10 秒内返回。考虑到计算机必须从磁盘读取 40GB 的数据，将其映射到物理内存，然后让 CPU 在没有缓存的情况下对其进行处理，老实说这个速度已经相当令人惊叹了。作为参考，我电脑的配置为 Core i5 12600K，32GB 内存，文件存储在 M.2 SSD 硬盘上。在计算过程中，我看到 SSD 硬盘的峰值读取速度约为 800 MB/s。
    至此，互联网再次被证明是错误的：你不仅可以按照 TikTok 帖子的方式编写一个功能齐全、性能良好的程序，而且还非常有趣。
    网友：没必要，一个简单的 for 循环就能解决
    不过 Andreas Karlsson 的分享，并没有得到部分开发者的认可，甚至认为他有些“哗众取宠”：
    “在我看来，这几乎是过度设计。为什么要费尽心思生成代码？只需一个简单的‘for 循环’就能解决。”
    func isOdd(n int) bool { var odd bool for i := 0; i < n; i++ { odd = !odd } return odd }
    “真正高质量的运行应始终使用递归。”
    func isOdd(n int) bool { switch { case n == 0: return false case n > 0: return !isOdd(n-1) default: return !isOdd(n+1) } }
    还有人指出：“我完全听不懂这个笑话。我们从中学到了什么？exe 文件不能超过4GB？一个2^32 if 的程序大约是300GB？这看起来并不疯狂，只是毫无意义。”
    对此，有人反驳道：“可笑的是，他真的做到了。几十年来，人们一直在拿它开玩笑，但这个人是认真的。由于代码多得太极端，没有编译器可以处理，甚至没有任何已知的汇编程序，因此他必须生成自己的机器码二进制文件才能运行。结果最后，他居然还真的成功了。”
    参考链接：
    https://andreasjhkarlsson.github.io/jekyll/update/2023/12/27/4-billion-if-statements.html
    https://news.ycombinator.com/item?id=38790597

的一个朋友在最近的一次面试中遇到了一个有趣的 CSS 面试问题。当我第一次看到这个问题时，我认为这是一个常见的CSS问题。然而，经过仔细研究，我发现了这个问题的有趣部分。

面试题：请用CSS实现如下效果：

页面上有一些数字显示文章阅读的数量。如果数字小于 100，则数字的颜色为灰色。如果数字大于或等于 100，则数字为棕色，而且这种颜色可以动态调整，而不是提前预设。

最后面试官要求用纯CSS来解决这个问题，你知道如何达到这个效果吗？

题目分析

这个问题的本质是什么？

这个问题的本质很简单，也就是说，这实际上是一个 if-else 问题。

如果我们用伪代码描述这个问题，它应该是这样的：

let color;
if (reads < 100){
  color = 'gray'
} else {
  color = 'brown'
}

所以现在问题变成了：我们如何在 CSS 中实现这个 if-else 逻辑？请记住，CSS 中没有 if-else 关键字之类的东西。

在 CSS 中实现 if-else

在 CSS 中实现 if-else 的逻辑是本题考查的核心技能。让我们在下面完成这个逻辑。如果你学会了这个技巧，你可以用它来实现许多强大的 CSS 效果。

首先，让我们了解一个叫做clamp的函数。

clamp() CSS 函数将一个值限制在上限和下限之间。clamp() 允许在定义的最小值和最大值之间的值范围内选择中间值。

基本语法格式：

clamp(min, var, max)

我们可以将clamp函数理解为这样的伪代码：

funciton clamp(min, var, max){
  if(var <= min){
    return min
  }

  if(var >= max){
    return max
  }

  if(var > min && var < max){
    return var
  }
}

所以：

clamp(10, 13, 20) → 13

clamp(10, 2, 20) → 10

clamp(10, 30, 20) → 20

用法示例：

font-size 的值不会超过 20px，也不会低于 10px。

这是clamp的基本用法。

如果您对clamp仍有疑问，可以参考 MDN 文档。

接下来，我们在 CSS 中实现这个功能。

result的值根据 var 的值而变化：

当 var 的值小于 100 时，结果的值为 10；

当 var 的值大于等于 100 时，结果变为 20。

如果我们用伪代码描述这个问题，它应该是这样的：

let result;
if(var < 100){
  result = 10
} else {
  result = 20
}

这个要求和clamp函数类似，但又不一样。clamp可以将 var 的值限制在一个范围内，但我们现在希望结果的值是 10 或 20。

那我们怎么做？

有一个特殊的技巧：我们可以放大 var 的变化，使其值要么达到区间的上限，要么达到区间的下限。

于是：

let result = clamp(10, (var-99) * 20, 20)

这会产生一个效果：

如果 var 的值为 99，则表达式变为：clamp(10, 0, 20), takes 10.
如果 var 的值为 100，则变为：clamp(10, 20, 20), takes 20.

用一张图解释：

同样，如果我们希望：

当 var 的值小于 50 时，result的值为 5。

当 var 的值大于等于 50 时，result的值为 15。

我们只需要这样写：

let result = clamp(5, (var-49) * 15, 15)

你有没有注意到：这实际上是 if-else 的效果，我们做到了。

在 CSS 中切换颜色

回到最初的面试问题。

为了让我们后面可以使用 CSS 进行变量计算，我们需要将值放在一个 CSS 变量中，所以 HTML 可以这样写：

<num style=<span data-raw-text="" "="" data-textnode-index-1655261252004="96" data-index-1655261252004="1664" class="character" style="margin: 0px; padding: 0px;">"--num:1<span data-raw-text="" "="" data-textnode-index-1655261252004="96" data-index-1655261252004="1672" class="character" style="margin: 0px; padding: 0px;">">1<span>reads</span></num>
<num style=<span data-raw-text="" "="" data-textnode-index-1655261252004="99" data-index-1655261252004="1710" class="character" style="margin: 0px; padding: 0px;">"--num:99<span data-raw-text="" "="" data-textnode-index-1655261252004="99" data-index-1655261252004="1719" class="character" style="margin: 0px; padding: 0px;">">99<span>reads</span></num>
<num style=<span data-raw-text="" "="" data-textnode-index-1655261252004="102" data-index-1655261252004="1758" class="character" style="margin: 0px; padding: 0px;">"--num:102<span data-raw-text="" "="" data-textnode-index-1655261252004="102" data-index-1655261252004="1768" class="character" style="margin: 0px; padding: 0px;">">102<span>reads</span></num>

如果我们不需要考虑 HTML 语义或 SEO 因素，这里的“数字”和“读取”都可以由伪元素生成：

<head>
  <style>
    num::before {
      counter-reset: num var(--num);
      content: counter(num);
    }

    num::after {
      content: 'reads';
    }
</style>
</head>

<body>
  <div>
    <num style=<span data-raw-text="" "="" data-textnode-index-1655261252004="121" data-index-1655261252004="2033" class="character" style="margin: 0px; padding: 0px;">"--num:1<span data-raw-text="" "="" data-textnode-index-1655261252004="121" data-index-1655261252004="2041" class="character" style="margin: 0px; padding: 0px;">"></num>
    <num style=<span data-raw-text="" "="" data-textnode-index-1655261252004="124" data-index-1655261252004="2064" class="character" style="margin: 0px; padding: 0px;">"--num:99<span data-raw-text="" "="" data-textnode-index-1655261252004="124" data-index-1655261252004="2073" class="character" style="margin: 0px; padding: 0px;">"></num>
    <num style=<span data-raw-text="" "="" data-textnode-index-1655261252004="127" data-index-1655261252004="2096" class="character" style="margin: 0px; padding: 0px;">"--num:102<span data-raw-text="" "="" data-textnode-index-1655261252004="127" data-index-1655261252004="2106" class="character" style="margin: 0px; padding: 0px;">"></num>
  </div>
</body>

如果对 content 和 counter-reset 不熟悉，可以查看 MDN 文档。

content ：https://developer.mozilla.org/en-US/docs/Web/CSS/content
counter-reset：https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset

具体的演示效果，可以通过以下地址查看：https://codepen.io/bytefishmedium/pen/VwQrGEb

棕色为#aa540e，用HSL颜色表示为hsl(27, 50%, 36%)，如下：

它的饱和度控制颜色的鲜艳程度。饱和度越高，颜色越鲜艳，饱和度越低，颜色越暗。当饱和度降低到0时，就变成了完全的灰色，如下：

在灰色和棕色之间切换颜色，即在 hsl(27, 85%, 36%) 和 hsl(27, 85%, 36%) 之间切换。

于是就有如下代码：

num{
  --s: clamp(0%,(var(--num) - 99) * 99%,85%);/* >100 */
  color: hsl(27 var(--s) 36%);
}

最终的演示：https://codepen.io/bytefishmedium/pen/WNMXabm

总结

我们通过clamp函数在CSS中实现if-else效果，最后让颜色根据变量的值进行切换。

其实原面试题还有另外一部分，简单来说就是：让颜色在多个值之间切换。仅使用 if-else 不足以满足此要求，有兴趣的话，可以留言交流学习。

近在群里，有个小伙伴问了这么一道很有趣的问题：

CSS 能否实现，容器再某个高度下是某种表现，一旦超出某个高度，则额外展示另外一些内容

为了简化实际效果，我们看这么一张示意效果图：

可以看到，当容器高度没有超过某一个值时，没有箭头图标。反之，箭头图标出现。

这个效果在很多场景都会出现，可以算是一个高频场景，那么在今天，我们能否不使用 JavaScript，仅仅凭借 CSS 实现类似于这样的功能呢？

答案当然是可以，XBoxYan 大佬在 CSS 实现超过固定高度后出现展开折叠按钮介绍了一种非常巧妙的借助浮动的解法，十分有意思，感兴趣的同学可以先行一步了解。

当然，浮动 float 在现如今的 CSS 世界，运用的已经非常少了。那么除了浮动，还有没有其它有意思的解法？本文我们将一起来探究探究。

方法一：借助最新的容器查询

第一种方法，非常简单，但是对兼容性有所要求。那就是使用容器查询 -- @container 语法。

容器查询在新时代布局新特性 -- 容器查询也详细介绍过。

简单而言，容器查询它给予了 CSS，在不改变浏览器视口宽度的前提下，只是根据容器的宽度或者高度变化，对布局做调整的能力。

基于这个场景，我们假设我们有如下的 HTML/CSS 结构：

<div class="g-container">
    <div class="g-content">
        Lorem ipsum dolor s...
    </div>
</div>

.g-container {
    position: relative;
    width: 300px;
    height: 300px;
    resize: vertical;
    overflow: hidden;

    .g-content {
        height: 100%;
    }

    .g-content::before {
        content: "↑";
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translate(-50%, 0);
    }
}

它是这么一个样式效果：

其中，我们给元素 .g-content 添加了 resize: vertical，让它变成了一个可以在竖直方向上通过拖动改变高度的容器，以模拟容器在不同内容的场景下，高度不一致的问题：

我们通过元素的伪元素实现了箭头 ICON，并且它是一直显示在容器内的。

下面，我们通过简单的几句容器查询代码，就可以实现让箭头 ICON，只在容器高度超过特定高度的时候才出现：

.g-container {
    container-type: size;
    container-name: container;
}

@container container (height <= 260px) {
    .g-content::before {
        opacity: 0;
    }
}

简单解释一下：

.g-container 它被用作容器查询的目标容器container-type 属性指定了容器的类型为 size，表示我们将使用容器的尺寸来应用样式。container-name 属性指定了容器的名称为 container，以便在后面的容器查询规则中引用。
@container container (height <= 260px) {} 表示这是一个容器查询规则，在括号中的条件 (height <= 260px) 表示当容器的高度小于等于 260px 时，应用该规则下的样式
具体规则为，如果容器的高度小于等于 260px 时，.g-content 元素的伪元素将变得透明

这样，我们就非常简单的实现了容器在不同高度下，ICON 元素的显示隐藏切换：

完整的代码，你可以戳这里：CodePen Demo -- flexible content

当然，这个方案的唯一缺点在于，截止至今天（2023-11-11），兼容性不是那么好：

那，有没有兼容性更好的方案？当然，来我们一起来看看 clamp + calc 的方案。

方法二：clamp+calc大显神威

上面效果的核心在于：

如果容器的高度大于某个值，显示样式 A
如果容器的高度小于等于某个值，显示样式 B

那么想想看，如果拿容器的高度减去一个固定的高度值，会发生什么？假设一下，ICON 元素的 CSS 代码如下：

.g-content::before {
    content: "↑";
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: calc(100% - 200px);
}

仔细观察 bottom: calc(100% - 200px)，在元素的 bottom 属性中，100% 表示的是容器当前的高度，因此 calc(100% - 200px) 的含义就代表，容器当前高度减去一个固定高度 200px。因此：

当容器高度大于 200px，calc(100% - 200px) 表示的是一个正值
当容器高度小于 200px，calc(100% - 200px) 表示的是一个负值
当容器高度等于 200px，calc(100% - 200px) 表示 0

我们看看这种情况下，整个 ICON 的表现是如何的：

可以看到，当容器高度大于 200px 的时候，箭头 ICON 确实出现了，但是，它无法一直定位在整个容器的最下方。

有什么办法让它在出现后，一直定位在容器的最下方吗？

别忘了，CSS 中，还有几个非常有意思的数学函数：min()、max()、clamp()，它们可以有效限定动态值在某个范围之内！

不太了解的，可以看看这篇现代 CSS 解决方案：CSS 数学函数

利用 clamp()，我们可以限定计算值的最大最小范围，在这个场景下，我们可以限制 bottom 的最大值为 10px：

.g-content::before {
    // ...
    bottom: clamp(-99999px, calc(100% - 200px), 10px);
}

上面的代码 clamp(-99999px, calc(100% - 200px), 10px)，核心在于，如果 calc(100% - 200px) 的计算值大于 10px，它只会取值为 10px，利用这个技巧，我们可以在容器高度超长时，把箭头 ICON 牢牢钉在容器的下方，无论容器的高度是多少：

到此，结束了吗？显然没有。

虽然上面的代码，解决当 calc(100% - 200px) 的计算值大于 10px 的场景，但是没有解决，当 calc(100% - 200px) 的计算值处于 -10px ~ 10px 这个范围内的问题。

我们可以清楚的看到，当我们往下拖动容器变高的时候，箭头元素是逐渐慢慢向上出现，而不是突然在某一个高度下，直接出现，所以在实际使用中，会出现这种 ICON 只出现了一半的尴尬场景：

但是，莫慌！这个问题也好解决，我们只需要给 calc(100% - 200px) 的计算值，乘上一个超级大的倍数即可。原因在于：

当 calc(100% - 200px) 的计算值是负数时，我们其实不希望 ICON 出现，此时，乘上一个超级大的倍数，依然是负数，不影响效果
当 calc(100% - 200px) 的计算值是正数时，为了避免 ICON 处在只漏出部分的尴尬场景，通过乘上一个超级大的倍数，让整个计算值变得非常大，但是由于又有 clamp() 最大值的限制，无论计算值多大，都只会取 10px

看看代码，此时，整个 bottom 的取值就改造成了：

.g-content::before {
    // ...
    bottom: clamp(-9999px, calc(calc(100% - 200px) * 100000), 10px);
}

通过，将 calc(100% - 200px) 的值，乘上一个超大的倍数 100000，无论是正值还是负值，我们把计算值放大了 100000 倍。这样，整个效果就达成了我们想要的效果：

仔细看上图，ICON 元素从渐现，变成了瞬间出现！与上面的 @container 效果几乎一致，最终达成了我们想要的效果。

其核心就在于 clamp(-9999px, calc(calc(100% - 200px) * 100000), 10px)，一定需要好好理解这一段代码背后的逻辑。

基于此，我们就巧妙的利用 clamp() + calc() 方法，近似的实现了类似于 if/else 的逻辑，实在是妙不可言！

CodePen Demo -- flexible content

原文链接：https://www.cnblogs.com/coco1s/p/17831064.html

在线咨询

上一篇：收藏一个很棒的HTML5网站模版下载网站
下一篇：WPS文档编辑受限怎么解除？一招帮你轻松解决它

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

“用 40 亿条 if 语句，只为判断一个数字是奇是偶？”

方法一：借助最新的容器查询

方法二：clamp+calc大显神威

您的项目需求