как px, em,% измеряется в свойстве преобразования css?

#html #css #css-transforms

#HTML #css #css-преобразования

Вопрос:

когда мы используем em, px,% в свойстве transform (translate) для перемещения элемента в направлении X, Y в css, тогда эти единицы измерения измеряются (разрешаются) относительно чего?Как он решает, сколько двигаться в каком направлении?

Комментарии:

1. Единицы измерения соответствуют их параметрам по умолчанию. Так, например, если вы используете, скажем em , это относительно размера шрифта элемента, в котором он используется, и так далее на основе спецификации.

Ответ №1:

У вас есть 2 ситуации:

  1. Вы используете значения длины ( px , em , ch , и т.д.) либо относительные, либо абсолютные. В этом случае, ничего особенного, когда они используются translate , они будут разрешены таким же образом, если они используются с любым другим свойством (вы можете обратиться к предоставленной ссылке, чтобы понять, как решается каждое из них).
  2. Вы используете процентные значения. В этом случае значение будет разрешено относительно размера самого элемента. Таким образом, использование translateX(X%) означает перевод по оси X на X% от ширины, в то время translateY() как логически учитывается высота.

Подробнее: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate