Я не очень часто редактирую CSS, и почти каждый раз, когда мне нужно идти и google CSS box model, чтобы проверить, t20 > находится внутри border и margin снаружи, или наоборот. (Только что проверили снова и padding находится внутри).
Есть ли у кого хороший способ запомнить это? Немного мнемоника, хорошее объяснение того, почему имена так круглые...
При работе с CSS, наконец, вы с ума сойдете с проложенной ячейкой, в которую они будут вставлять вас, имеет прокладку на внутренней стороне стен.
pin - P находится в
Распечатайте диаграмму из раздела Размеры коробки в спецификации и поставьте его на стену.
Для меня "padding" просто звучит более внутренне, чем "margin". Может, подумать о печатной странице поможет? Поля - это районы на дальнем конце - как правило, вы даже не можете печатать на краю - они немаркированы. В пределах этих полей содержимое может быть дополнено, чтобы обеспечить дополнительный барьер между содержимым и полями?
Как только вы будете работать в CSS, это станет второй натурой, чтобы запомнить это.
Я только что узнал об этом с течением времени - модель ящика довольно проста, но основная причина, по которой люди находят это трудно, состоит в том, что body не заметно нарушает модель.
Действительно, если вы дадите body маржу и фон, вы увидите, что она окружена белой полосой. Однако это не так - body padding совпадает с полем. Это устанавливает несколько неправильных вещей о коробке.
Я обычно думаю об этом так:
Вы используете окно. Если вы помещаете что-то в коробку, вы бы поместили немного прокладки внутрь, чтобы убедиться, что она не прижалась к бокам. Тогда маржа была бы другой.
Я знаю, что это ответ на ваш вопрос, но больше совет. Всякий раз, когда я имею дело с маржей и дополнением, я добавлю границу вокруг той части, с которой вы работаете, затем оттуда она показывает мне комнату, в которой я должен работать. Когда я все установлен, я удаляю границу.
Тим Сондерс дал отличный совет - когда я впервые начал работу с CSS, я поставил точку в создании хорошей, полностью прокомментированной базовой таблицы стилей. Эта таблица стилей многократно менялась и остается потрясающим ресурсом.
Однако, когда я столкнулся с моими проблемами с моделью коробки, я начал использовать "Mo Pi". Как и в: "Я недостаточно толстый, мне нужно съесть mo pi". Странно, но это сработало для меня. Конечно, я надел двадцать фунтов, изучая CSS...; -)
Заполнение обычно используется внутри. Либо на внутренней стороне стены, либо на коробке для доставки, это просто. И если прокладка внутри, то маржа находится снаружи. Не должно быть слишком сложно.
используйте firebug, чтобы помочь вам увидеть.
Создайте собственную таблицу стилей с комментариями, которую вы можете использовать в качестве шаблона, когда вам нужно создать новый сайт или отредактировать существующий сайт.
Вы можете добавить к нему, когда будете расти в знаниях и применять его к различным браузерам, чтобы увидеть, как ведут себя разные вещи.
Вы также сможете добавлять комментарии или примеры о других трудно запоминающихся материалах или материалах, которые являются интуитивно понятными.
Добавить границу, даже временно. Когда вы играете с цифрами, вы увидите разницу.
Фактически, временные границы вокруг элементов - это полезный способ работы, так что вы можете увидеть, почему всплывают плавающие и т.д.
PAdding является PArt элемента PAinting: он расширяет элемент фона. Имеет смысл подумать о парном элементе + padding как об общем фоне. Прокладка аналогична полосе картины: чем больше набивка, тем больше холст и, следовательно, фон. Граница (рамка для рисования) обойдет эту пару. И margin будет разделять картины на стене галереи. Размышление о концепции фона объекта помогает склеить парный объект + дополнение друг к другу. Обычные объяснения того, что внутри и снаружи, не прилипают к памяти: через некоторое время все возвращаются к первоначальной путанице. Помните также, что поля по вертикали сворачиваются, а отступы - нет.
Вместо того, чтобы снова и снова спрашивать Google, вы просто используете окно инспектора. В этой вкладке стиля и прокрутите вниз донизу вы можете видеть это.
Маржа: когда вы хотите переместить блок. Заполнение: когда вы хотите переместить элементы внутри блока.