css中是否可使用变量 |css 左右两边一样高

在CSS3之前，是不支持使用变量的。但是，随着CSS3的推出，var()函数被引入，使得大家能够在CSS中使用变量来存储和重复使用值。如下面的例子所示：
:root {
--main-color: #ff4500;
}
h1 {
color: var(--main-color);
}

上述代码中，大家使用了:root伪类来定义了一个全局的变量–main-color，它的值为#ff4500。然后在h1元素的样式中，大家使用了var()函数来引用这个变量，从而设置了h1元素的颜色为–main-color的值。这样，大家就可以在整个网站的样式中反复使用–main-color这个变量，而不用每次都重复定义它。

需要注意的是，var()函数还有一个很方便的特性，就是可以指定一个默认值。如果–main-color这个变量未被定义，那么var(–main-color, red)将会把变量的值设置为red。这样就可以避免在没有定义变量时出现错误的情况。

h1 {
color: var(--main-color, red);
}

除了使用:root定义全局变量，大家还可以在任何选择器中定义局部变量。这些变量只会对选择器内部的样式生效，对其他元素没有影响。如下面的例子所示：

.container {
--font-size: 14px;
font-size: var(--font-size);
}
.container .title {
--font-size: 18px;
font-size: var(--font-size);
}

在.container选择器中，大家定义了一个名为–font-size的局部变量，它的值为14px。然后，在.container .title选择器中，大家重新定义了–font-size这个变量，并将其值设为18px。这样，在.container .title中，font-size的值将会是18px，而在.container中，font-size的值则是14px。

总之，使用CSS变量可以简化样式代码，并使其更易于管理。但需要注意的是，在一些过时的浏览器中可能不支持var()函数，因此需要根据实际情况来决定是否使用CSS变量。