Обзор

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

содержимое, отступы, границы и поля составляют блочную модель в CSS.

  • Содержимое. Содержимым может быть абзац, элемент div или любой другой HTML-элемент, который может содержать текст, изображения и любые входные данные в вашем проекте.
  • Отступ. Отступ — это пространство вокруг вашего контента и соседнего контента. Заполнение очищает область вокруг определенного содержимого. Прокладка прозрачная.
  • Граница — граница, охватывающая отступы и содержимое.
  • Поля. Поля — это пространство вокруг элемента и соседних с ним элементов. Очищает территорию за границей. Это также прозрачно.

Изучите изображение выше, чтобы лучше понять его

Практическое руководство: отступы и поля

Одно дело знать концепцию вещи, но самое главное — понимать множество способов ее использования с пользой. Это даст вам лучшее понимание и повысит эффективность использования.

margin и padding имеют схожий синтаксис и способы их объявления в нашем коде, и существует множество способов использования правил синтаксиса. Ниже я объясню все на примере заполнения.

1. Настройка заполнения для определенной стороны:

  • padding-left: value ; — устанавливает заполнение определенного значения в левой части содержимого.
  • padding-right: value ; — устанавливает заполнение определенного значения с правой стороны содержимого.
  • padding-top: value ; — устанавливает заполнение определенного значения в верхней части содержимого.
  • padding-bottom: value ; — устанавливает отступ определенного значения в нижней части содержимого.

2. Используя правила стенографии:

  • padding: value1 value2 value3; — устанавливает отступы value1 вверху содержимого, value2 слева и справа от содержимого и value3 внизу содержимого.
  • padding: value1 value2 value3 value4; - устанавливает отступы для значения 1 вверху, значения 2 справа, значения 3 внизу и значения 4 слева от содержимого.

Значения, указанные в пояснении выше, являются измерениями. У нас есть два типа измерений

  • Абсолютный: устанавливается на определенный размер; px, mm, cm, pt….
  • Fluid: устанавливает размер относительно окружающих элементов.

— %, vw (ширина области просмотра), vh (высота области просмотра).

— em (для шрифта): 1em — текущий размер, .75em — 75% от текущего размера

— rem (для шрифта): 1rem — текущий размер корня.

Приведенное выше объяснение заполнения также применимо к margin.

Установка границы

Граница имеет три основных значения:

  1. border-width - который можно указать с помощью любых правил измерения.
  2. border-style - может быть
  • dotted — определяет пунктирную границу
  • dashed — определяет пунктирную границу
  • solid — определяет сплошную границу
  • double — определяет двойную границу.
  • groove — определяет трехмерную рифленую границу. Эффект зависит от значения цвета границы.
  • ridge — определяет ребристую трехмерную границу. Эффект зависит от значения цвета границы.
  • insect — определяет границу 3D-врезки. Эффект зависит от значения цвета границы.
  • outset — определяет начальную границу 3D. Эффект зависит от значения цвета границы.
  • none - не определяет границы.
  • hidden — определяет скрытую границу.

3. border-color - Может быть любого цвета.

Вы можете использовать приведенное выше отдельно или использовать сокращенное правило ниже:

› граница: 2px сплошная #fff;

Приведенный выше код устанавливает сплошную белую рамку толщиной 1 пиксель вокруг содержимого.

Установка границы на определенной стороне контента с помощью border-*: width style color;. Звездочка обозначает желаемую сторону: верхнюю, левую, правую или нижнюю.

например нижняя граница: 2px с точкой #0000ff;

В приведенном выше примере устанавливается синяя пунктирная рамка толщиной 2 пикселя внизу содержимого.

Вы также можете указать это отдельно, используя border-*-*: value;, где первая звездочка обозначает сторону, а вторая — стиль, ширину или цвет границы.

например, ширина верхней границы: 1px;

Вышеупомянутое устанавливает границу в 1 пиксель в верхней части содержимого.

Фактическая длина и box-sizing

Когда вы устанавливаете свойства ширины и высоты элемента с помощью CSS, вы просто устанавливаете ширину и высоту области содержимого. Чтобы вычислить полный размер элемента, вы также должны добавить отступы, границы и поля.

Таким образом, фактическая ширина элемента будет:

Фактическая ширина = ширина + поле (левое или правое или оба: если указано) + отступ (левое или правое или оба: если указано) + граница (левое или правое или оба: если указано)

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

e.g.

div {
 width: 50px;
 height: 20px;
 margin: 10px;
 padding: 5px 3px;
 border: 2px solid #000;
 }

Фактическая ширина вышеуказанного div будет: 50 пикселей + 10 пикселей (поле слева) + 10 пикселей (поле справа) + 3 пикселя (поле слева) + 3 пикселя (поле справа) + 2 пикселя (граница слева) + 2 пикселя (граница -right), что в сумме дает 80px.

Рассчитайте высоту для лучшего понимания.

Вот тут-то и появляется свойство box-sizing.

`box-sizing имеет два значения:

  1. content-box - это добавки по умолчанию
  2. border-box — учитывает содержимое, отступы, границы и поля. Когда указано для элемента, ширина равна ширине без каких-либо добавок.

Укажите box-sizing: border-box внутри универсального селектора * в начале кода для лучшей практики.

Если вы найдете это полезным или у вас есть идеи, которые помогут мне стать лучше, вы можете связаться со мной, чтобы дать мне несколько советов или несколько слов поддержки, чтобы написать: Twitter, Linkedln, Email.

Спасибо за прочтение!

Первоначально опубликовано на https://muhtoyyib.hashnode.dev.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.