CSS var: атрибуты относятся к одной и той же переменной, но измеряют разные

Question 1

<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), но ее ширина и высота в браузере разные. Это почему??

css css-variables css-calc

0

Fred Fredonando 20 Ноя 2021 в 14:51

3

Потому что процентное соотношение не будет разрешено таким же образом .. расчет выполняется не внутри переменной, а внутри свойства

–

Temani Afif

20 Ноя 2021 в 14:56

Мои сомнения разрешены. Большое тебе спасибо.

–

Fred Fredonando

21 Ноя 2021 в 13:06

Answer

Как уже было сказано в первом комментарии. Расчет выполняется не внутри определения, а внутри свойства.

Это приводит к следующему:

height: var(--scrollbar-width); равно height: calc(100vw - 100%);, где 100% вычисляется относительно высоты элемента. В то время как width: var(--scrollbar-width); или width: calc(100vw - 100%); приведет к вычислению, где 100% относительно ширины элемента.

По этой причине даже если вы ссылаетесь на одно и то же настраиваемое свойство, результаты для width и height разные.

0

Quentin Albert 20 Ноя 2021 в 15:27

Мои сомнения разрешены. Большое тебе спасибо.

–

Fred Fredonando

21 Ноя 2021 в 13:05

Question 2

Как уже было сказано в первом комментарии. Расчет выполняется не внутри определения, а внутри свойства.

Это приводит к следующему:

height: var(--scrollbar-width); равно height: calc(100vw - 100%);, где 100% вычисляется относительно высоты элемента. В то время как width: var(--scrollbar-width); или width: calc(100vw - 100%); приведет к вычислению, где 100% относительно ширины элемента.

По этой причине даже если вы ссылаетесь на одно и то же настраиваемое свойство, результаты для width и height разные.

0

Quentin Albert 20 Ноя 2021 в 15:27

Мои сомнения разрешены. Большое тебе спасибо.

–

Fred Fredonando

21 Ноя 2021 в 13:05

CSS var: атрибуты относятся к одной и той же переменной, но измеряют разные

1 ответ

Похожие вопросы

Новые вопросы

css