css怎样调用css函数_CSS Math函数入门4级

最新推荐文章于 2024-08-23 08:56:30 发布

翻译最新推荐文章于 2024-08-23 08:56:30 发布 · 1.1k 阅读

文章标签：

#python #java #javascript #编程语言 #html #ViewUI

本文介绍了CSS中的数学函数calc(), min() 和 max()，它们允许在CSS中进行数学计算，实现响应式设计和布局约束。这些函数在Level 4中得到了增强，可以用于在不同设备尺寸下平滑过渡元素的属性。示例展示了如何使用它们来控制字体大小、宽度和响应式排版。" 119772672,10737759,企业级Docker私仓：Harbor详解与优势,"['容器技术', 'Docker', 'Harbor', '仓库管理', '企业级应用']

css怎样调用css函数

功能符号是CSS值和单位模块的一部分，它也是有用的数学函数（例如calc()以及4级min()和max()的所在地。这些强大的功能为需要CSS内的数学逻辑功能CSS作者打开了难以置信的大门。在本文中，我们将讨论calc() ， min()和max() ，以及这三者现在如何对您的工作有用。让我们开始吧！

什么是功能符号？

功能符号是W3C CSS值和单位模块的九个父节之一（准确地说是第八节）。从Level 4 Editor's Draft开始，Functional Notations现在包含更多小节，例如toggle()允许通过使用attr()在值和属性引用之间进行切换。还有另一个有趣的小节叫做“数学表达式”，其中包含我们友好的数学函数calc() ， min()和max() 。

让我们转向W3C定义，以帮助我们了解什么是功能标记：

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

在外行的话来说，他们会说这是一个“功能名”，如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锁”。如果您使用Google 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建议使用实际的clip clamp()函数的注释。 clamp()会在边界值之间“夹紧”一个值。

“……我同意，虽然技术上是多余的，但是clamp()通常足够有用，以至于它可能应该存在。”

天啊！这将是对数学表达式的补充。诸如clamp()类的功能无疑是当今响应性需求的胜利，并且肯定会成为该语言的受欢迎朋友。

clamp(minN, midN, maxN)

当前的讨论围绕上述语法类型进行，而我恰好是一个同意该建议的语法。它是有道理的，并且以逻辑方式读取。我只是想知道，如果clamp()在将来真正出现时， min()和max()的使用会发生什么情况。

由于我们的饮水机chat不休，我们可以集中精力讨论这里讨论的实际数学函数； calc() ， min()和max() 。

现在满足`calc()`

这是我最喜欢的支持CSS的数学函数之一，并且可以执行各种向导。一旦掌握了语法，语法也不是太粗糙，而且支持也很出色。

.my-element {
    width: calc(50% - 10rem);
}

在上面的示例中，我们具有函数名称（ calc ），其后是带括号的括号，其中包含“表达式”，即数学逻辑。

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

再次，这是说“您可以在括号内进行数学运算”的说法。

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

`calc()`在野外

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

这是另一个使用Tim Brown的calc()和视口单位的令人叹为观止的版式演示。该演示用于他讨论CSS锁的文章，如果您关心排版，我鼓励您阅读。

视口单位和calc()也可以帮助创建一些我们最喜欢的布局模式。在上面的演示中， calc()用于从视口的高度（ vh ）中减去页脚的高度。克里斯·科耶尔（Chris Coyier）为我们的老朋友“ The Sticky Footer”提出了一个明智的解决方案，因此经常被要求。与CSS变量结合使用时，该演示也可以很好地工作。

David Khourshid在此演示中肯定还涉及应用程序和动态状态。 David将calc()用于背景，偏移值，变换，滤镜，不透明度和均匀宽度。对于那些希望与CSS变量一起学习React的人来说，这也是一个很棒的演示。

现在让我们看一下您当然会喜欢的两个附加数学函数，它们分别是min()和max() 。

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

如前所述，这些功能仍处于起步阶段，因此演示用例的演示很暗淡，但是请不要吓到您进行试验。为了研究min()和max()您需要每晚下载WebKit 。下载后，您可以自由打开Nightly（夜间）（黑色图标）并开始工作。

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

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

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

每个表达式用逗号分隔，后面跟一个附加表达式。我们还可以使用明确声明相同规则的规范：

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

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

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

你明白了吗？他们只是说最小（最负）或最大（最正）。 W3C只是允许我们写负数作为表达式的一部分。

现在让我们花点时间看一下min()和max()如何在正在运行的演示中证明自己。戴上帽子。

现实生活中的`min()`和`max()`

这是一个演示，使用组件width和font-size展示了min()和max()的几个用例。 width有一个最小约束和一个最大约束，而我们组件的font-size也有一个最小值和最大值。请记住，在撰写本文时，这仅在WebKit Nightly中有效；如果您希望看到它的动画效果，请查看此GIF （坦白地说，它太重了，无法嵌入到页面中）。

在上面的示例中，我首先通过限制width并在一开始就这样做。

width: min(max(100px * 2, 70vw), 500px);

使用上面的方法，我可以包括一个中间约束与一个最小约束和一个最大约束。这行代码告诉浏览器“ 尝试将宽度设置为70vw，但不要让宽度小于200px（100px * 2）或大于500px。” 您还可以走另一条路来获得类似的结果。

min(max(minN, midN), maxN)

为了更详细地解释，这等于最小，中间，最后是最大约束值。将max()嵌套在min()有助于在所需约束之间进行钳位。

min-width: 200px
max-width: 500px

如果我们使用min-width和max-width我们将通过min()和max()到达等效的目标。我很好奇，如果在未来几年中，诸如min-width属性在使用数学函数（如min()和max()时会过时的话。

关于font-size我使用相同的最小/最大方法来创建响应式和锁定式。

font-size: min(max(1rem, 4vw), 2rem);

我告诉浏览器“ 尝试将字体大小设置为4vw，但不要让其小于1rem或大于2rem。” 不幸的是，没有像宽度那样的min-font-size和max-font-size这样的等效项，但是从CSS Fonts Module Level 4规范开始可能成为现实。

这无疑是令人振奋的消息，当涉及到约束CSS中的值时，作者也同样感到兴奋。

使用min（）和max（）意味着没有更多的“ CSS锁”！您可以通过嵌套min（max（））☛font-size来进行数字钳制：min（max（30px，10vw），60px）; pic.twitter.com/hMxAt0iu2K
— TommyH🎃dgins（@innovati） 2017年9月19日

只需搜索“ CSS锁”

如果使用搜索引擎查找CSS锁，则会发现大量文章和演示。 CodePen还可以在另一个CSS Locks搜索下显示各种笔。对于CSS锁的新知识，让我更详细地解释一下。

锁定技术允许根据当前视口大小在两个值之间平滑过渡的能力。蒂姆·布朗（Tim Brown）在他的文章“带有CSS锁的灵活印刷术 ”中将其称为“ CSS Locks”，但是该技术最初是由Mike Riethmuller在他的文章“精确控制响应印刷术”中引入的。

当将calc()和视口单位用于标题和正文副本时，这会很有用，该标题和正文将根据屏幕尺寸进行缩放。这种约束就是我们所熟知的“ CSS锁”。

关于CSS锁的文章很多，因此这里有一些我最喜欢的文章，您可以在自己的时间阅读。

Zell Liew的基于视口单位的版式
Florens Verschelde CSS锁数学
克里斯·科耶尔（Chris Coyier）的CSS“锁”
Geoff Graham的流体排版
Michael Riethmuller的vh和vw装置响应式和流体式印刷
杰克·威尔逊（Jake Wilson）的CSS Poly流体尺寸设计

用EQCSS锁定

在以上Tommy Hodgins的演示中，使用EQCSS来控制JavaScript的font-size ，而CSS位于后座。我会让您自己决定如何将JavaScript与CSS混合使用。

使用CSS变量和JavaScript锁定

我编写了一个JavaScript帮助器，该帮助器使用CSS变量以及JavaScript来“锁定”标题的字体大小，正文和行高，因为屏幕尺寸在调整大小和页面加载事件时会有所变化，而无需使用媒体查询。

这些属性将“锁定”锁定在已定义的值上，但这并非没有警告。在开发方面，每种方法都各有利弊。由于发生了事件，并且CSS属性发生了更改，因此您很可能会在调整大小时遇到绘画和布局问题，因此最好谨慎使用，换句话说，不要将其用于页面上的所有内容。

这是有关JS样式的一些智慧。

每当您使用JavaScript来帮助应用样式时，它都会比单独使用CSS慢。用CSS可以完成的所有工作。
当使用JavaScript应用样式时，性能取决于执行测试的复杂程度以及需要测试页面上多少个元素。尝试以限制执行的JS支持的测试次数的方式编写样式，以确定要应用的样式，并尝试限制JS支持的样式表探查或测试HTML中的元素数量。
了解哪些事件会触发样式的重新计算。您希望样式与浏览器中发生的事情保持同步，但是您还希望限制在任何给定时间运行的事件侦听器的数量。在这里，限制测试所要应用的元素数量确实很重要。如果您使用的是UI库，则可能会在框架中内置事件和回调，这些事件和回调会触发以JS为基础的样式进行重新计算。请注意，您正在编写的以JS为基础的样式将在其中运行的页面上，浏览器中显示哪些事件侦听器，并尝试找到方法来限制所需的事件侦听器数量；限制您正在侦听的元素的数量，将类似的侦听器挂接到全局事件中，使用特定于框架的事件进行更紧密的集成，并考虑使用新的浏览器API（例如Resize Observer和Mutation Observer）来满足您的需求。