Skip to content

Commit 599e842

Browse files
committed
minor fixes
1 parent a22b47e commit 599e842

File tree

1 file changed

+5
-5
lines changed

1 file changed

+5
-5
lines changed

2-ui/1-document/11-coordinates/article.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -76,17 +76,17 @@ right:${r.right}
7676

7777
Так что дополнительные зависимые свойства существуют лишь для удобства.
7878

79-
Технически, значения `width/height` могут быть отрицательными, это позволяет задать "направленный" прямоугольник, например, для выделения мышью с отмеченным началом и концом.
79+
Что же касается `top/left`, то они на самом деле не всегда равны `x/y`. Технически, значения `width/height` могут быть отрицательными. Это позволяет задать "направленный" прямоугольник, например, для выделения мышью с отмеченным началом и концом.
80+
81+
То есть, отрицытельные значения `width/height` означают, что прямоугольник "растет" влево-вверх из правого угла.
8082

8183
Вот прямоугольник с отрицательными `width` и `height` (например, `width=-200`, `height=-100`):
8284

8385
![](coordinates-negative.svg)
8486

85-
Он начинается в своём правом-нижнем углу, и затем "растёт" влево-вверх, так как отрицательные `width/height` ведут его назад по координатам.
86-
87-
Как вы видите, свойства `left/top` здесь не равны `x/y`. То есть они не дублируют друг друга. Формулы выше могут быть исправлены с учётом возможных отрицательных значений `width/height`. Это достаточно просто сделать, но редко требуется, так как результат вызова `elem.getBoundingClientRect()` всегда возвращает положительные значения для ширины/высоты.
87+
Как вы видите, свойства `left/top` при этом не равны `x/y`.
8888

89-
Здесь мы упомянули отрицательные `width/height` лишь для того, чтобы вы поняли, почему эти с виду дублирующие свойства на самом деле не являются дубликатами.
89+
Впрочем, на практике результат вызова `elem.getBoundingClientRect()` всегда возвращает положительные значения для ширины/высоты. Здесь мы упомянули отрицательные `width/height` лишь для того, чтобы вы поняли, зачем существуют эти с виду дублирующие свойства.
9090
```
9191
9292
```warn header="Internet Explorer и Edge: не поддерживают `x/y`"

0 commit comments

Comments
 (0)