CSS var : 属性指的是同一个变量但度量不同

Question

<html>
<body>
<div></div> 
</body>
</html>

:root { 
    --scrollbar-width: calc(100vw - 100%);
}

body, html {
    width: 100%;
    height: 100%;
  margin: 0px;
}

div {
    background-image: url(http://i.stack.imgur.com/r5CAq.jpg);  
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

div 元素的宽度和高度引用相同的 CSS 自定义变量 (--scrollbar-width)，但其宽度和高度在浏览器中的测量值不同。这是为什么？？

Answer 1

如第一条评论中所述。计算不是在定义内部完成的，而是在属性.

内部完成的

结果如下：

height: var(--scrollbar-width); 等于 height: calc(100vw - 100%); 其中 100% 是相对于元素的高度计算的。虽然 width: var(--scrollbar-width); 或 width: calc(100vw - 100%); 会导致 100% 相对于元素宽度的计算。

这就是为什么即使您引用相同的自定义属性 width 和 height 的结果也不同的原因.

CSS var : 属性指的是同一个变量但度量不同

CSS var : attributes refer to the same variable but measure different

css

css-variables

css-calc