| CSS 计算属性 calc()的完整指南（下） | 您所在的位置：网站首页 › html中的margin怎么用 › CSS 计算属性 calc()的完整指南（下） |
CSS 计算属性 calc()的完整指南（下）
|
从之前的文章：CSS 计算属性 calc()的完整指南(一），我们可以学习到几个方面： calc() 只作用于属性值calc() 用于长度和其他数值不能在媒体查询中使用混合单位与预处理器数学比较本文接着之前未完的工作，恰好是周末，一次把它完成。如果我的工作对你有帮助，希望可以点个赞和收藏分享。 显示数学即使你没有使用只有calc()才能实现的功能，也可以用它在CSS里面 "展示你的工作"。例如，假设你需要精确计算一个元素的1⁄7的宽度......。 代码语言：javascript复制.el { /* This is easier to understand */ width: calc(100% / 7); /* Than this is */ width: 14.2857142857%; }这可能会在某种自创的CSS API中泛起，好比。 代码语言：javascript复制[data-columns="7"] .col { width: calc(100% / 7); } [data-columns="6"] .col { width: calc(100% / 6); } [data-columns="5"] .col { width: calc(100% / 5); } [data-columns="4"] .col { width: calc(100% / 4); } [data-columns="3"] .col { width: calc(100% / 3); } [data-columns="2"] .col { width: calc(100% / 2); }calc()的数学运算符你已经有了+、-、*和/，但它们在使用方法上有所不同。 加法(+)和减法(-)要求这两个数都是长度 代码语言：javascript复制.el { /* 有效? */ margin: calc(10px + 10px); /* 无效的? */ margin: calc(10px + 5); }无效的值会使整个单项声明无效。 除法(/)要求第二个数字是无单位的。 代码语言：javascript复制.el { /* 有效的? */ margin: calc(30px / 3); /* 无效的? */ margin: calc(30px / 10px); /* 无效的? (不能除以0) */ margin: calc(30px / 0); }乘法(*)要求其中一个数是无单位的。 代码语言：javascript复制.el { /* 有效的 ? */ margin: calc(10px * 3); /* 有效的 ? */ margin: calc(3 * 10px); /* 无效的 ? */ margin: calc(30px * 3px); }空白空间很重要嗯，对于加法和减法来说是这样的。 代码语言：javascript复制.el { /* 有效的 ? */ font-size: calc(3vw + 2px); /* 无效的 ? */ font-size: calc(3vw+2px); /* 有效的 ? */ font-size: calc(3vw - 2px); /* 无效的 ? */ font-size: calc(3vw-2px); }负数是可以的(例如 calc(5vw - -5px) )，但这是一个例子，说明空格不仅是必需的，而且是有用的。 Tab Atkins告诉我，+和-周围需要间隔的原因其实是出于解析的考虑。我不能说我完全理解，但例如，2px-3px被解析为数字 "2 "和单位 "px-3px"，这对任何人都没有好处，而+还有其他问题，比如被 "数字语法消耗"。我本来猜测空格应该是和自定义属性的--语法有关，但没有! 乘法和除法不需要运算符周围的空格。但我认为好的一般建议是，为了其他运算符的可读性和肌肉记忆，应该包括这些空格。 外围的空白并不重要。如果你愿意，你甚至可以做换行符。 代码语言：javascript复制.el { /* 有效的 ? */ width: calc( 100% / 3 ); }不过，请注意以下事项：calc() 与开头括号之间没有空格。 代码语言：javascript复制.el { /* 无效的 ? */ width: calc (100% / 3); }嵌套计算(calc())你可以这样做，但没有必要。这和使用一组额外的小括号而不使用 calc()部分是一样的。例如 代码语言：javascript复制.el { width: calc( calc(100% / 3) - calc(1rem * 2) ); }您不需要在calc() 内部使用这些代码，因为括号可以单独工作： 代码语言：javascript复制.el { width: calc( (100% / 3) - (1rem * 2) ); }而在这种情况下，即使没有括号，"运算顺序 "也能帮助我们。也就是说，除法和乘法是先发生的（在加法和减法之前），所以根本不需要括号。可以这样写： 代码语言：javascript复制.el { width: calc(100% / 3 - 1rem * 2); }但是，如果您想增加清晰度，请随意使用。如果操作顺序不利于您（例如，您确实确实需要先进行加法或减法），则需要括号。 代码语言：javascript复制.el { /* This */ width: calc(100% + 2rem / 2); /* Is very different from this */ width: calc((100% + 2rem) / 2); }CSS自定义属性和calc() ?除了calc()能够混合单位的惊人能力之外，calc()的下一个最棒的地方就是与自定义属性一起使用。自定义属性可以有一些你在计算中使用的值。 代码语言：javascript复制html { --spacing: 10px; } .module { padding: calc(var(--spacing) * 2); }我相信你可以想象一个CSS设置，通过设置一堆CSS自定义属性，然后让CSS的其他部分根据需要使用它们，大量的配置发生在顶部。 自定义属性也可以相互引用。这里有一个例子，其中使用了一些数学（注意一开始没有calc()函数），然后再应用。(最终还是要放在calc()里面。) 代码语言：javascript复制html { --spacing: 10px; --spacing-L: var(--spacing) * 2; --spacing-XL: var(--spacing) * 3; } .module[data-spacing="XL"] { padding: calc(var(--spacing-XL)); }你可能不喜欢这样，因为你需要记住你使用属性的地方的calc()，但从可读性的角度来看，这是可能的，而且可能很有趣。 自定义属性可以来自HTML，这有时是一件很酷很有用的事情。(参见Splitting.js如何为单词/字符添加索引的例子。) 代码语言：javascript复制 ... ... ... 代码语言：javascript复制div { /* Index value comes from the HTML (with a fallback) */ animation-delay: calc(var(--index, 1) * 0.2s); }以后增加单位如果你在存储数字时没有单位，或者提前用没有单位的数字做数学运算，你总是可以等到应用数字时，通过乘以1和单位来加单位。 代码语言：javascript复制html { --importantNumber: 2; } .el { /* Number stays 2, but it has a unit now */ padding: calc(var(--importantNumber) * 1rem); }弄乱颜色像RGB和HSL这样的颜色格式有数字，你可以用calc()来搞。例如，设置一些基本的HSL值，然后改变它们形成一个你自己创造的系统（例子）。 代码语言：javascript复制html { --H: 100; --S: 100%; --L: 50%; } .el { background: hsl( calc(var(--H) + 20), calc(var(--S) - 10%), calc(var(--L) + 30%) ) }你不能把calc()和attr()结合在一起CSS中的attr()函数看起来很吸引人，就像你可以从HTML中提取属性值并使用它们。但是... 代码语言：javascript复制...代码语言：javascript复制div { /* Nope */ color: attr(data-color); }不幸的是，这里没有 "类型 "在起作用，所以attr()的唯一作用是与内容属性结合的字符串。这意味着这个可以用： 代码语言：javascript复制div::before { content: attr(data-color); }我提到这一点，是因为可能很想用这种方式拉出一个数字来用于计算，比如： 代码语言：javascript复制...代码语言：javascript复制.grid { display: grid; /* Neither of these work */ grid-template-columns: repeat(attr(data-columns), 1fr); grid-gap: calc(1rem * attr(data-gap)); }幸运的是，这并不重要，因为在HTML中的自定义属性同样有用，甚至更有用! 代码语言：javascript复制...代码语言：javascript复制.grid { display: grid; /* Yep! */ grid-template-columns: repeat(var(--columns), 1fr); grid-gap: calc(var(--gap)); }浏览器工具浏览器DevTools将向您展示您在样式表中编写的calc()。 Firefox DevTools – Rules 如果您需要找出计算值，有一个计算选项卡（在所有浏览器的DevTools中，至少在我所知道的范围内）会向您显示它。 Chrome DevTools – Computed 浏览器支持这个浏览器支持数据来自Caniuse，它有更详细的数据。数字表示浏览器支持该版本及以上的功能。  如果你真的需要支持超远期（如IE 8或Firefox 3.6），通常的技巧是在使用calc()的属性或值之前再添加一个属性或值。 代码语言：javascript复制.el { width: 92%; /* Fallback */ width: calc(100% - 2rem); }calc()也有不少已知的问题，但都是针对旧浏览器的。canIuse......列出了13个，下面是一小部分。 Firefox |
【本文地址】