CSS数学函数入门4级_极简慕枫

时间：2019-08-02

编辑:网站制作公司

1160

功能符号是CSS值和单位模块的一部分，它也是有用的数学函数的基础，如calc()4级min()和4级max()。这些强大的功能为CSS作者打开了令人难以置信的门户，需要CSS中的数学逻辑能力。在本文中，我们将讨论calc()，min()以及max()这三种方法如何在您的工作中发挥作用。让我们开始吧！苏州网站制作

什么是功能符号？

功能表示法是W3C CSS值和单位模块的九个父部分之一（准确地说是第8部分）。从第4级编辑的草案开始，功能符号现在包含更多的子部分，例如 toggle() 允许在值之间切换，以及通过使用的属性引用 attr()。还有另一个有趣的小节叫做“数学表达式”，它涵盖了我们友好的数学函数 calc()， min() 以及 max()。

让我们转向W3C定义，以帮助我们理解功能符号是什么：

“ 功能表示法是一种可以表示更复杂类型或调用特殊处理的组件值。语法以函数的名称开头，后面紧跟左括号，后跟符号的参数后跟右括号。“

在layperson的术语中，他们说它是一个“函数名称”，例如 calc，然后是打开(和关闭)括号。但他们之间有什么关系呢？

引入数学表达式

如上所述，“数学表达式”是“功能符号”的一个小节，但它们是什么以及它们做了什么？再次，让我们转向W3C，它们被定义为：

“数学函数 calc（）， min（）和 max（）允许使用加法（+），减法（-），乘法（*）和除法（/）的数学表达式作为组件值。”

这意味着 calc()，min()并且max()是“数学函数”，允许括号内的“表达式”以“计算值”。好的，现在很清楚。术语“表达式”只是一种说法“在括号内完全允许数学逻辑”的一种奇特方式。

第4级引入的是一个新更新的定义，以补充我们目前所知的内容：

“ 数学函数的组件可以是文字值，其他数学函数或其他表达式，例如 attr（），它们计算为有效的参数类型（如 <length>）。”

为了进一步澄清，这里提到的“其他数学函数”是 calc()， min() 和 max()，但他们还规定这些功能都可以嵌套在彼此。你可以写 calc(min())， min(calc())， calc(max(min()))， calc(min(attr())) 等等。但是，我的建议是尽力而为，避免嵌套漩涡，即使有能力这样做，如规范所示。

现在让我们再次说“你好”几个优秀的数学函数，几乎失去了与CSS工作组握手的机会。

min()，并max()

功能 min()和max()两个数学函数，使他们的标志，但只有后，他们几乎从值和单位4级编者草案中删除。感谢Lea Verou，变革之风迫使他们进入，我不能更快乐。

“也许现在价值观3已经进入CR，是时候重新考虑增加  min() 并  max() 重新回到价值观4？
作者正在做的非常  怪异的黑客  与  calc() 效仿他们  font-size 和  line-height，他们称之为“CSS锁”。如果您使用谷歌  CSS锁定，  您将看到这些黑客攻击的普及程度，表明作者需要明确。
此外，由于CSS变量变得越来越广泛的应用，需要  min() 和  max() 将会变得更大。我记得6年前让我们放弃它们的一些问题   现在可以通过 Variables引入的计算值时间概念来解决  。“  - Lea Verou

由于Lea对GitHub的建议，min()并max()已正式插入编辑的CSS 4级值和单元草案中，包括WebKit的早期采用。开发人员可以使用WebKit Nightly进行个人实验和探索（截至10/24/17）。这是一个单一的WebKit提交，用于奇怪的好奇，支持被神奇地授予min()和max()。

粗略地看一眼 clamp()

另一个有趣的八卦在由Lea Verou开始的同一个GitHub线程中是Tab Atkins建议实际clamp()功能的评论。clamp()将字面上“钳制”边界值之间的值。

“...我确实同意 clamp()，虽然技术上多余，但经常有用，它可能值得存在。”

天啊！这将是数学表达式的补充。这样的功能clamp()对于今天的响应需求来说是一个明确的胜利，并且肯定会成为该语言的受欢迎的朋友。

1	clamp(minN, midN, maxN)

目前的讨论围绕着上面这种类型的语法，我碰巧是同意这个建议的一个; 它是有道理的，并以合乎逻辑的方式读取。我只是想知道将来会发生什么min()，max()如果clamp()真的出现了。

随着我们的水冷却器喋喋不休让我们专注于我们来到这里讨论的实际数学函数; calc()，min()和max()。

现在见面 calc()

这是我最喜欢的数学函数之一，可以优化CSS，可以做各种各样的魔法。语法也不太粗糙，一旦掌握了它，支持就是恒星。

.my-element {

width: calc(50% - 10rem);

}

在上面的示例中，我们有函数name（calc），后跟包含“表达式”的括号，或者换句话说......数学逻辑。

“ calc（）函数允许使用加法（+），减法（-），乘法（*）和除法（/）的数学表达式作为组件值。” - W3C

再一次，这是花哨的说“你可以在括号中做数学”。

至于表达式，作者可以通过通用的值，例如50%，2em，40，并且可以使用calc()任何地方 <长度>， <频率>， <角>， <时间>， <百分比>， <编号>或 <整数> 值是允许。我最喜欢的单位在野外使用和检查是视台（vh，vw， vmin， vmax）。这些是屏幕尺寸值，对于我们即将看到的排版和布局特别方便。

calc() 在野外

上面的例子只是处理响应式排版的一种方法。通过使用媒体查询，Sass calc()和视口单元的组合，Mike向我们证明了响应式排版如何在特定像素值之间完美缩放。

这是使用calc() Tim Brown 的另一个令人惊讶的排版演示和视口单元。这个演示用于他讨论CSS Locks的文章，我鼓励你阅读如果排版是你关心的东西。

视口单元也 calc() 可以帮助创建一些我们最喜欢的布局模式。在上面的演示中，calc()用于从视口（vh）的高度减去页脚的高度。Chris Coyier为我们的老朋友“The Sticky Footer”提供了一个聪明的解决方案。当与CSS变量结合使用时，此演示也很有用。

在大卫·库尔希德（David Khourshid）的演示中，应用程序和动态状态肯定存在其他情况。David calc()用于背景，偏移值，变换，滤镜，不透明度甚至宽度。对于那些希望深入了解React和CSS变量的人来说，这也是一个很棒的演示。

现在让我们来看看你肯定会喜欢的两个额外的数学函数，现在称为min()和max()。

min()和max()：定义约束

如前所述，这些功能仍然处于初期阶段，因此展示用例的演示是惨淡的，但不要让你吓唬你进行实验。为了调查min()，max()你需要每晚下载WebKit。下载后，您可以自由打开夜间（黑色图标）并开始工作。

1 2	min(expression, [expression]) max(expression, [expression])

还记得当我们学习什么表达式时？这只是说“数学逻辑”的一种奇特方式。例如：

1 2	min(1 * 10vw, 2 / 50vw) max(1 * 10vw, 2 / 50vw)

每个表达式都用逗号分隔，后面跟着另一个表达式。我们还可以转向明确说明同一规则的规范：

“ min（）或 max（）函数的计算值是逗号分隔的表达式列表” - W3C

如果您错过了解释中非常重要的部分，那么规范只是说明了一个以逗号分隔的表达式列表，就像我们之前在代码片段中所做的那样。

“ min（）或 max（）函数分别表示它包含的最小（最负）或最大（最正），逗号分隔计算。” - W3C

你抓到了那一切吗？他们只说最小（最负）或最大（最正）。 W3C只允许我们将负数作为表达式的一部分。

让我们利用这个时间，现在怎么看min()和max()证明自己的工作演示; 抓住你的帽子。

min()而max() 在现实生活中

下面是展示了几个使用案例演示 min()和max()使用的组件 width和font-size。该width具有最小限制和最大限制，而我们的组件font-size也与最小值和最大值钳制。请记住，在撰写本文时，这只适用于WebKit Nightly; 如果你想看到它的动画，请看一下这个GIF（坦率地说太重了，无法嵌入到页面中）。

在上面的例子中，我通过限制width和在一行中这样做来开始。