Вспоминая CSS слева, сверху, справа, снизу


19

При использовании CSS, какие маленькие хитрости вы сделали, чтобы запомнить (возможно, высказывание?) Порядок расположения слева, сверху, справа, снизу при определении объединенных атрибутов CSS, таких как border, margin и padding.

Я навсегда забыл, и Google, кажется, заполнен дерьмом, как W3Schools.


6
Как w3schools.com "дерьмо"? На глаз легче прочитать их справочник по CSS3, чем документ по спецификации W3C CSS 3 ...
danlefree

8
@danlefree См. W3Fools для длинного списка жалоб. (Хотя я не знаю, что они где-то не правы в этом конкретном вопросе.)
Су '20

Данлифи, посмотри ответ Су. w3schools - это сатана, продвигающий обучение и ресурсы по HTML / CSS / JS. Движение продолжается, чтобы убрать дерьмо со страницы 1 Google.
Mâtt Frëëman

2
Интересно, почему никто не упомянул Север, Восток, Юг, Запад. Это эквивалентно по часовой стрелке, но эй :).
Кевин

Ответы:


24

Все они идут по часовой стрелке , начиная сверху.


4
За исключением фонового позиционирования (что кажется немного уместным в данном случае), сначала выбирается левое смещение, а затем верхнее смещение.
Марсель

@ Марсел, очень верно, что объясняет, почему я всегда ошибаюсь в первый раз.
Джон Конде

фоновое расположение упорядочено по x-yкоординатам, что более разумно, когда вы используете числовые значения, а не left top.
zzzzBov


8

Я помню это, визуализируя циферблат часов: начиная с 12 часов (вверху), затем двигаясь к 3 часам (справа), затем к 6 часам (внизу) и, наконец, к 9 часам (слева).


5

В дополнение к прямой аналогии с обмоткой, я предлагаю еще одну мнемонику: « Вверху», «Вправо», «Внизу», «Влево» - инициализация TRBL , произносится как « ужасно» - или, если хотите, неприятности . (Привет, даже высокие частоты доставляют мне неприятности как баритону.) Он хорошо сочетается с CRAP (контрастность, повторяемость, выравнивание, близость), четырьмя принципами надежного веб-дизайна.


1
ДЕРЬМО. Молодцы, сэр
Рэй Митчелл

2

практика

Я не помню, чтобы когда-либо использовался какой-либо специальный метод запоминания для этого маленького лакомого кусочка. Я знаю, что узнал, что они были установлены по часовой стрелке сверху вниз, но потом я начал писать много CSS.

Когда вы выполняете задачу несколько раз, возникает тенденция запоминания деталей для повышения эффективности, поэтому на этом этапе:

  1. все
  2. вверху и внизу справа и слева
  3. верхний правый и левый нижний
  4. верхний правый нижний левый

это вторая натура. Как:

border: <width> <style> <color>;

и

background: <color> <image> <repeat> <attachment> <position>;
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.