CSS3计算样式 calc()_css样式计算-优快云博客

本文链接：https://blog.youkuaiyun.com/wangcongsy/article/details/125784989

本文详细介绍了CSS3的calc()函数，用于动态计算长度值，支持加减乘除运算。通过示例展示了如何使用calc()设置对象外边距、调整表单域大小以及在CSS变量中嵌套使用。同时提到了:root伪类用于定义全局CSS变量，提高代码复用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

calc() 计算

var() 引用变量 --varxxx

:root{

--globalVarxx:100px; 申明 html全局变量

}

:root{
--windowW:1000px;
--windowH:1000px;
}
.father{
width: var(--windowW);
height: calc(var(--windowH)-100px);
}

:root{}
可以在一个CSS文件中定义全局变量，供多个属性引用。

var()
var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。

calc()
calc() 函数用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则

https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc

calc()

calc() 此 CSS 函数允许在声明 CSS 属性值时执行一些计算。它可以用在如下场合：<length>、<frequency>, <angle>、<time>、<percentage>、<number>、或 <integer>。

语法

/* property: calc(expression) */
width: calc(100% - 80px);

Copy to Clipboard

此 calc() 函数用一个表达式作为它的参数，用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合，采用标准操作符处理法则的简单表达式。

+

加法。

-

减法。

*

乘法，乘数中至少有一个是 <number>。

/

除法，除数（/ 右面的数）必须是 <number>。

表达式中的运算对象可以使用任意 <length> 值。如果你愿意，你可以在一个表达式中混用这类值的不同单位。在需要时，你还可以使用小括号来建立计算顺序。

备注

+ 和 - 运算符的两边必须要有空白字符。比如，calc(50% -8px) 会被解析成为一个无效的表达式，解析结果是：一个百分比后跟一个负数长度值。而加有空白字符的、有效的表达式 calc(8px + -50%) 会被解析成为：一个长度后跟一个加号再跟一个负百分比。
* 和 / 这两个运算符前后不需要空白字符，但如果考虑到统一性，仍然推荐加上空白符。
用 0 作除数会使 HTML 解析器抛出异常。
涉及自动布局和固定布局的表格中的表列、表列组、表行、表行组和表单元格的宽度和高度百分比的数学表达式，auto 可视为已指定。
calc() 函数支持嵌套，但支持的方式是：把被嵌套的 calc() 函数全当成普通的括号。（译者注：所以，函数内直接用括号就好了。）

形式化语法

Error: could not find syntax for this item

例子

使用 CSS 变量嵌套使用 calc()

我们来看一下下面的代码：

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

在所有的变量都被展开后，widthC 的值就会变成 calc( calc( 100px / 2) / 2)，然后，当它被赋值给 .foo 的 width 属性时，所有内部的这些 calc()（无论嵌套的有多深）都将会直接被扁平化为一个括号（原文：be flattened to just parentheses），所以这个 width 属性的值就直接相当于 calc( ( 100px / 2) / 2) 了，或者说就变成 25px 了。简而言之：一个 calc() 里面的 calc() 就仅仅相当于是一个括号。

:root

概述

:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。

语法

Error: could not find syntax for this item

示例

在声明全局 CSS 变量时 :root 会很有用：

:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

:root
:root是一个伪类，表示文档根元素，所有主流浏览器均支持 :root 选择器，除了 IE8 及更早的版本。在:root中声明相当于全局属性，只要当前页面引用了:root segment所在文件，都可以使用var()来引用。

var()
var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。（这样做通常会产生无效的语法或者一个没有关联到变量的值。）

body {
background-color: var(--blue); /* 设置背景颜色为蓝色 */

————————————————
版权声明：本文为优快云博主「星尘」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/weixin_51123974/article/details/122311909