css中使用变量与calc() 函数

CSS变量

在 CSS 中，你可以使用变量（也称为自定义属性）来存储和重用值。变量可以使你的样式表更易于维护，因为它们允许你在一处更改值，并在整个样式表中更新使用该值的所有地方。

在 CSS 中使用变量需要遵循以下步骤：

定义变量：使用 --* 符号定义变量，其中 * 是变量的名称。变量名可以包含字母、数字、连字符和下划线。例如：

css
:root {
–main-color: #333;
–secondary-color: #666;
}
使用变量：在样式表中，你可以使用 var(*) 函数来使用变量，其中 * 是变量的名称。例如：

css
body {
background-color: var(–main-color);
color: var(–secondary-color);
}
在上面的示例中，var(–main-color) 将被替换为 #333，var(–secondary-color) 将被替换为 #666。

注意，变量的作用域是全局的，这意味着它们在整个文档中都可用。你可以在任何选择器中使用定义的变量。如果你重新定义了一个变量，它将覆盖先前的定义。

除了在 :root 选择器中定义全局变量之外，你还可以在任何选择器中定义局部变量。局部变量的作用域仅限于它们所在的选择器和其子元素。

希望这可以帮助你开始使用 CSS 中的变量。

calc() 函数

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

calc() 函数可以用于计算任何长度单位，包括百分比、em、px等。计算结果将根据所使用的单位进行四舍五入。例如，calc(100px - 50px) 结果为 50px。

calc() 的运算规则和使用方法类似于常规的数学运算，可以使用加（+）、减（-）、乘（）和除（/）等运算符。需要注意的是，运算符前后都需要保留一个空格，例如 width: calc(100% - 10px) 是正确的，而 width: calc(100%-120px) 是错误的。另外，如果表达式中有乘号（）和除号（/）时，前后可以不留空格，但建议留有空格。

calc() 函数可以用于设置 HTML 元素的宽度、高度、padding、margin 等 CSS 属性。例如，可以使用 calc() 计算一个元素的宽度为浏览器窗口宽度的 80% 减去 200px：width: calc(80% - 200px)。

calc() 函数在响应式设计中特别有用，因为它可以根据用户的设备屏幕大小动态调整元素的尺寸。例如，可以使用 calc() 设置一个元素的宽度为屏幕宽度的 50%：width: calc(50% - 100px)。

@漏刻有时文章来源地址https://uudwc.com/A/woyWj