Мнемоника для порядка CSS-полей и сокращенных свойств заполнения

Я никогда не могу вспомнить порядок сокращенного свойства для установки поля или заполнения в одном объявлении. Это:

margin-top:    2px;
margin-bottom: 4px;
margin-left:   3px;
margin-right:  8px;

можно записать как

margin: 2px 8px 4px 3px;

Да, я понимаю, что можно представить себе порядок, представив часы, начинающиеся в полдень и движущиеся по часовой стрелке. Но я все время забываю об этом. Мне нужно текстуально вспомнить порядок сверху, справа, снизу и слева.

Следовательно, Т Б Л Р T R B L.

Что-то вроде этого [R-существительное] [B-глагол] [L-существительные], возможно, лучший вариант, но я чувствую, что мне не хватает вдохновения. Если кто-нибудь встречал полезную мнемонику для этого, я бы хотел ее услышать. Как хороший мем, я уверен, что если что-то застрянет в моем мозгу, я вряд ли это забуду.

ПРИМЕЧАНИЕ: Этот вопрос дал неверную информацию - порядок (как указано в некоторых комментариях и ответах): Вверху справа внизу слева. (хех, понимаете, что я имею в виду? - dland)

это T R B L, у вас действительно делать проблемы с его запоминанием

inspite 10.12.2008 20:00

Это перебор для любого, кто знаком с аналоговыми часами. Абстракции, такие как слова и акронимы, неестественны для человеческого разума, запоминание T R B L, а затем ручное преобразование каждой буквы в физическую ориентацию делает жизнь более сложной, чем это должно быть ИМО. Намного лучше запомнить порядок визуально, ведь в этом контексте вы все-таки работаете в визуальной среде: D.

mahemoff 26.03.2012 03:58

Также следует помнить, что произойдет, если даны только два или три значения. Например, «маржа: 3em 5em;» и "маржа: 3em 5em 6em;". В первом случае 3em используется для верха и низа, а 5 - для левой и правой сторон. Во втором - 3 сверху, 5 слева и справа и 6 снизу. Я полагаю, что легко запомнить, что происходит, если задано только одно значение.

Harry Pehkonen 08.07.2015 17:23

Мне нравятся ответы, но это, наверное, самый нелепый вопрос только из-за вашего подхода к нему. Ты полностью потерял меня с существительными и глаголами. Это коробка, положи в нее часы и покончим с этим.

Eric Bishard 27.08.2015 10:02
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
86
4
27 839
22
Перейти к ответу Данный вопрос помечен как решенный

Ответы 22

Ответ принят как подходящий

Если вы не поймете это правильно, будет ПРОБЛЕМА

НЕ ТРЕБУЕТСЯ запоминать, если вы удаляете гласные

zzapper 28.02.2014 21:50

@zzapper: Ой --- EEEks. Я ошибся и удалил согласные.

Yaakov Belch 08.04.2014 14:38
css-tricks.com/…
Ryan Williams 31.07.2018 10:51

это

top
right 
bottom 
left

не то, что у тебя есть

Тhink RR_4_Right RR_5_RПеред тобой Leap

Есть лишнее «ты».

ziyuang 15.01.2014 00:42

Тр или BL e.

На самом деле часы работают отлично. Это самый интуитивный способ запомнить это, по крайней мере, для меня.

И это тоже работает в графическом плане ... в большинстве случаев вы все равно будете мыслить визуальными линиями.

Armstrongest 11.12.2008 01:37

Еще одна попытка:

Тираннозавр Рекс: Большая ящерица

Сложная логика границы прямоугольника?

Я такого раньше не слышал, но он мне нравится :)

Adam Rezich 10.12.2008 20:06

Просто подумайте по часовой стрелке, это самый простой способ. Начинается сверху и идет по кругу ... гораздо легче запомнить, чем какую-нибудь глупую фразу (при условии, что вы умеете читать часы ...)

Попробуйте остатки ростбифа?

Представьте, что вы читаете арабский или иврит: читайте сверху вниз справа налево и вниз. ; P Преимущество этого "правила" в том, что оно работает и для версии с тремя значениями: top right-and-left bottom

На самом деле, я все думал, что это трудно запомнить, но как только я обнаружил, что это направление часов, все стало проще.

Вращение по времени, немного хромает?

Действительно Большой Лебовски

"Тop, Right, Bottom, Left"
RR_1_R Действительно
Bad
Limerick

Всегда есть город Трамбул, Коннектикут

Почему бы просто не запомнить, что порядок идет по часовой стрелке, начиная с ТОПа:

ВЕРХ -> ВПРАВО -> ВНИЗ -> ВЛЕВО

* Т * op * р * аминь, * B * ottom, * L * unch

TRouBLe лучше всего подходит для меня. И если показаны только 3 значения, это Top, Sides, Bottom - что для пользователей из Великобритании означает TSB (банк, который правительство должно было выручить, используя наши деньги) - так что TRouBLe и TSB тесно связаны!

ПРОБЛЕМА всегда является для меня второстепенным напоминанием, так как я сначала думаю о направлении по часовой стрелке, но, возможно, нужно вспомнить, с чего вы начали; однако сокращение с тремя значениями всегда сбивало меня с толку, пока я не понял, что среднее (или второе) значение должно представлять два значения (стороны). Итак, три значения - второе из двух значений - помогают мне это запомнить.

Помните урок вождения:

Поверните направо, прежде чем налево

Уловка с часами работает для сочетания клавиш с 4 номерами, но есть ли какая-то логика для сочетаний клавиш с 3 и 2 номерами? 1, и это применимо ко всему, и это имеет смысл, но

1 = (T/R/b/l) 
2 = (T=b) (R=l)   
3 = (T) (R=l) (b)  
4 = (T) (R) (b) (l)

Это вообще не кажется логичным. Но... Первое значение относится к Top, Второй относится к правому, В-третьих, это дно и Четвертый - левый; Число не указывается, если оно совпадает со своим противоположным. ДОЛЖНЫ быть объявлены горизонтальные и вертикальные значения, если все значения не идентичны.

Другими словами, вы всегда указываете верхнее и правое значения, нижнее и левое попадают по мере необходимости.

Если вы достаточно взрослые, чтобы помнить оригинальный сериал «Звездный путь» (вы знаете, с капитаном Кирком), ну, во-первых, вы чертовски стары. Но есть серия "Проблема с трибблами". Оба существительных в заглавии работают. Я использовал это в прошлом, но также предпочитаю аналогию с часами.

Всякий раз, когда вы наносите удар в данной ситуации, просто думайте о вращении по часовой стрелке, то есть о том, как часы вращаются от 0 до 60 по кругу.

На мой взгляд, часы легче запомнить, чем слово TRouBLe (как отмеченный ответ), поскольку слово trouble принадлежит к английскому языку, и всем тем умам, которые носят английский язык, может быть легче запомнить слово TRouBLe, имеющее отношение к данной ситуации, но не те, кто использует английский язык только тогда, когда это действительно необходимо.

То же самое нельзя сказать о вращении часов по часовой стрелке, когда дело доходит до запоминания чего-либо (как задал вопрос), поскольку вращение по часовой стрелке - очень известное явление в мире.

Несколько сокращений (можно считать знакомым):

  1. TROUBLE (TROUBLESHOOT, TROUBLESOME)
  2. ТEрRIBLE
  3. TRIBBLE
  4. Тhe рoyal British Legion
  5. Тobacco рoad RR_24_RРаскетбол League
  6. RR_27_R Временный рevenue Borrowing Limit
  7. Т Трансформационный рule-Based Learning

Другие вопросы по теме