You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 2-ui/1-document/11-coordinates/article.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -76,17 +76,17 @@ right:${r.right}
76
76
77
77
Так что дополнительные зависимые свойства существуют лишь для удобства.
78
78
79
-
Технически, значения `width/height` могут быть отрицательными, это позволяет задать "направленный" прямоугольник, например, для выделения мышью с отмеченным началом и концом.
79
+
Что же касается `top/left`, то они на самом деле не всегда равны `x/y`. Технически, значения `width/height` могут быть отрицательными. Это позволяет задать "направленный" прямоугольник, например, для выделения мышью с отмеченным началом и концом.
80
+
81
+
То есть, отрицытельные значения `width/height` означают, что прямоугольник "растет" влево-вверх из правого угла.
80
82
81
83
Вот прямоугольник с отрицательными `width` и `height` (например, `width=-200`, `height=-100`):
82
84
83
85

84
86
85
-
Он начинается в своём правом-нижнем углу, и затем "растёт" влево-вверх, так как отрицательные `width/height` ведут его назад по координатам.
86
-
87
-
Как вы видите, свойства `left/top` здесь не равны `x/y`. То есть они не дублируют друг друга. Формулы выше могут быть исправлены с учётом возможных отрицательных значений `width/height`. Это достаточно просто сделать, но редко требуется, так как результат вызова `elem.getBoundingClientRect()` всегда возвращает положительные значения для ширины/высоты.
87
+
Как вы видите, свойства `left/top` при этом не равны `x/y`.
88
88
89
-
Здесь мы упомянули отрицательные `width/height` лишь для того, чтобы вы поняли, почему эти с виду дублирующие свойства на самом деле не являются дубликатами.
89
+
Впрочем, на практике результат вызова `elem.getBoundingClientRect()` всегда возвращает положительные значения для ширины/высоты. Здесь мы упомянули отрицательные `width/height` лишь для того, чтобы вы поняли, зачем существуют эти с виду дублирующие свойства.
90
90
```
91
91
92
92
```warn header="Internet Explorer и Edge: не поддерживают `x/y`"
0 commit comments