0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Блочная модель

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

Блочная модель, она же box model — это алгоритм расчёта размеров каждого отдельного элемента на странице, которым браузеры пользуются при отрисовке. Чтобы точно понимать, каким в итоге получится блок и сколько места он займёт, держите в голове следующую картинку:

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

Статья в тему:  Была ли инквизиция на Руси? Был ли на Руси феодализм? История и этнология. Факты. События. Вымысел

Блочная модель состоит из нескольких CSS-свойств, влияющих на размеры элемента:

  • width — ширина элемента;
  • height — высота элемента;
  • padding — внутренние отступы от контента до краёв элемента;
  • border — рамка, идущая по краю элемента;
  • margin — внешние отступы вокруг элемента.

Ширина и высота

При помощи свойств width и height можно задавать размеры контентной области блока.

Контентной областью называется условное внутреннее пространство блока, где располагается контент. В примере ниже мы создаём блок при помощи тега

По умолчанию элементы с блочным отображением ( display: block ) занимают всю ширину родителя, если явно не задано другое. А вот высота элемента подстраивается под контент.

Элементы со строчным ( display: inline ) или строчно-блочным ( display: inline-block ) отображениями подстраивают и ширину и высоту под вложенный контент, если при помощи width и height не задано иное.

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

Теперь элемент будет размером 200 на 200 пикселей.

padding

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

Добавим к стилям из примера выше внутренние отступы:

Теперь ширина блока будет равна 200 + 15 + 15 = 230 пикселей. А высота будет равна 200 + 25 + 25 = 250 пикселей. Внутренние отступы прибавились к ширине и высоте.

Статья в тему:  Бородинское сражение как кульминация романа Л.Н. Толстого "Война и мир"

border

При определении размеров элемента в расчёт берутся и рамки, за которые отвечает свойство border .

Пусть у элемента из примера выше будет рамка со всех сторон:

Теперь конечные размеры элемента будут:

  • 200 + 15 + 15 + 5 + 5 = 240 пикселей в ширину
  • 200 + 25 + 25 + 5 + 5 = 260 пикселей в высоту

margin

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

Если элементу из нашего примера мы зададим внешние отступы, то он будет занимать больше места, двигая при этом своих соседей:

Примеры использования блочной модели

Создадим простую страницу с блочным элементом:

Это просто HTML-документ с текстом внутри контейнера div . В браузере он выглядит так:

Для блока мы определили цвета фона, чтобы вы могли видеть, как он растягивается по экрану. Это позволит лучше понять то, что будет происходить дальше. Вот соответствующий CSS:

Давайте внесём несколько изменений.

Изменяем ширину

Первое, что мы сделаем, — определим ширину. Как было упомянуто ранее, сейчас её значение равно 100%. Чтобы изменить его, нам нужно взаимодействовать со свойством width .

Для него можно установить разные значения. Мы можем использовать фиксированную ширину вроде пикселей или пропорциональное значение вроде процентов. Последний вариант особенно важен для штук вроде адаптивного дизайна. Однако для простоты обойдёмся пикселями.

Статья в тему:  Английский для самостоятельного обучения. Английский язык для начинающих: программа для уровней Beginner и Elementary

Добавляем новое свойство в стили:

После перезагрузки страницы вы должны увидеть следующее:

Вы сразу заметите, как теперь ограничено растягивание div вправо. Также, как видите, его высота автоматически изменяется, чтобы уместить внутренний текст. Давайте ещё увеличим её.

Увеличиваем высоту элемента через CSS

Хотя содержимое вполне себе умещается в пределах прямоугольника, порой есть веские причины ещё увеличить высоту. Например, что, если мы захотим, чтобы элемент был квадратом? Это вполне достижимо с помощью следующего свойства в нашем списке — height .

С высотой мы можем делать всё то же самое, что и с шириной: устанавливать фиксированное или пропорциональное значение. Добавляем в стили:

В итоге страница выглядит так:

Как видите, элемент принял нужную нам форму, так как мы установили одинаковые значения для высоты и ширины.

Знакомимся с границами

Теперь изменим границы. Как упоминалось, границы уже есть, просто мы их не видим. Изменим это с помощью свойства border .

Важно знать, что это свойство принимает три значения: width , style и color . Width отвечает за толщину границы (обычно в пикселях), style может принимать значения solid , dahsed , dotted и т.д., а в color можно прописать цвет как словом вроде «red», так и hex-значением цвета.

В принципе, достаточно просто определить толщину границ. Тем не менее, в большинстве случаев результат будет лучше при определении всех трёх значений. Меняем CSS:

Статья в тему:  Церковная реформа петра 1 плюсы и минусы. Изменения в организационной структуре армии. Церковные преобразования Петра I. Упразднение патриаршества. Создание Священного Синода

И получаем результат:

Выглядит здорово, не так ли

Также обратите внимание, что для разных сторон можно установить разные типы границ с помощью свойств border-top , border-right , border-bottom и border-left .

Добавляем отступы

Одна из проблем, которая выделяется при взгляде на наш пример, заключается в том, что текст начинается прямо с границы элемента. Из-за этого его сложно читать, да и выглядит не очень приятно. К счастью, свойство padding позволяет это исправить:

Вот как это отразится на результате:

Так же, как и с границами, можно настроить отступы отдельно для каждой стороны элемента. Для этого используются свойства padding-top , padding-right , padding-bottom и padding-left .

Можно не прописывать отдельно все эти свойства, а описать все отступы одной строкой вроде padding: 10px 5px 15px 10px; . Здесь значения соответствуют отступам сверху, справа, снизу и слева соответственно.

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

Добавляем поля

Вот мы и добрались до полей, которые определяют расстояние между элементами.

Добавим margin в стили:

Выглядит это так:

Как видите, в результате элементы отодвинулись от краёв страницы. Однако поля для элемента определены со всех сторон, а не только сбоку и сверху. Скопируем div , чтобы это можно было увидеть:

Статья в тему:  7 на 9 умножение. Умножение на девять. Секреты фитнеса мозга, тренируем память, внимание, мышление, счет

Сейчас у нас одинаковые поля со всех сторон. Однако для разных сторон можно установить свои значения. Это работает так же, как и с отступами: margin-top , margin-left и т. д или однострочное сокращение.

Поля частично применимы к строчным элементам, но только к боковым сторонам.

Немного о размерах элементов

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

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

Есть способы обхода такого поведения вроде установки свойства элемента box-sizing равным border-box . В этом случае ширина будет включать в себя границы и всё содержимое подстроит свои размеры, чтобы уместиться в этих рамках.

Тем не менее, поля всё ещё влияют на общий размер элемента. Держите это в голове, когда будете работать над разметкой страницы.

CSS блочная модель в деталях

  • Содержание:
  • 1. Определение блочной модели
  • 2. Отступы элемента
  • 2.1. Схлопывание вертикальных отступов
  • 2.2. Выпадение вертикальных отступов
  • 2.3. Физические свойства отступов: свойства margin-top, margin-right, margin-bottom, margin-left
  • 2.4. Краткая запись отступов: свойство margin
  • 3. Поля элемента
  • 3.1. Физические свойства полей: свойства padding-top, padding-right, padding-bottom, padding-left
  • 3.2. Краткая запись полей: свойство padding
  • 4. Рамки элемента
Статья в тему:  Четные и нечетные числа. Понятие о десятичной записи числа. Нечетные числа

1. Определение блочной модели

Каждый блок имеет область содержимого, в которой находится текст, дочерние элементы, изображение и т.п., и необязательные окружающие ее padding , border и margin . Размер каждой области определяется соответствующими свойствами и может быть нулевым, или, в случае margin , отрицательным.

  • край содержимого
  • край поля
  • край рамки
  • край отступа

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

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

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

2. Отступы элемента

Отступы окружают край рамки элемента, обеспечивая расстояние между соседними блоками. Свойства отступов определяют их толщину. Применяются ко всем элементам, кроме внутренних элементов таблицы. Сокращенное свойство margin задает отступы для всех четырех сторон, а его подсвойства задают отступ только для соответствующей стороны.

Смежные вертикальные отступы элементов в блочной модели схлопываются.

2.1. Схлопывание вертикальных отступов

Смежные вертикальные отступы двух или более элементов уровня блока margin объединяются (перекрываются). При этом ширина общего отступа равна ширине большего из исходных. Исключение составляют отступы корневого элемента, которые не схлопываются.

Статья в тему:  Битва за Сталинград. Значение Сталинградской битвы. Сталинградская битва: численность войск, ход сражения, потери

margin-bottom: 30px; width: 100%; display: inline-block;

margin-top: 15px; width: 100%; display: inline-block;

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

Отступы не схлопываются:

  • Между плавающим блоком и любым другим блоком;
  • У плавающих элементов и элементов со значением overflow , отличным от visible , со своими дочерними элементами в потоке;
  • У абсолютно позиционированных элементов, даже с их дочерними элементами;
  • У строчно-блочных элементов.

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

2.2. Выпадение вертикальных отступов

Если внутри одного блока расположить другой блок и задать ему margin-top , то внутренний блок прижмется к верхнему краю родительского, а у родительского элемента появится отступ сверху, т.е. внутренний блок «выпадет» из родительского блока. Если у родительского элемента также был задан верхний отступ, то выберется наибольшее из значений.

Чтобы избавиться от эффекта выпадения, можно задать родительскому элементу padding-top или добавить border-top: 1px solid transparent .

2.3. Физические свойства отступов: свойства margin-top, margin-right, margin-bottom, margin-left

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

Статья в тему:  Что сделать чтобы человек был более ответственным. Психология. Близкие и друзья

Свойства не наследуются.

margin-top/margin-right/margin-bottom/margin-left
Значения:
длинаРазмер отступа задается в единицах длины, например, px , in , em . Значение по умолчанию 0 .
%Вычисляется относительно ширины блока контейнера. Изменяются, если изменяется ширина родительского элемента.
autoДля элементов уровня строки, плавающих ( float ) значения margin-left или margin-right вычисляются в 0 . Если для элементов уровня блока задано margin-left: auto или margin-right: auto — соответствующее поле расширяется до края содержащего блока, если оба — их значения становятся равными, что горизонтально центрирует элемент относительно краев содержащего блока.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

2.4. Краткая запись отступов: свойство margin

Свойство margin является сокращенным свойством для установки margin-top , margin-right , margin-bottom и margin-left в одном объявлении.

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

Если два — верхний и нижний отступы устанавливаются на первое значение, а правый и левый — устанавливаются на второе.

Если имеется три значения — верхний отступ устанавливается на первое значение, левый и правый — на второе, а нижний — на третье.

Если есть четыре значения — они применяются сверху, справа, снизу и слева соответственно.

3. Поля элемента

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

Статья в тему:  Бутират действие на организм мужчины. Бутират действие на организм для продления жизни

Фоны элемента по умолчанию закрашивают поля элемента и пространство под его рамкой. Это поведение можно настроить с помощью свойств background-origin и background-clip.

3.1. Физические свойства полей: свойства padding-top, padding-right, padding-bottom, padding-left

Свойства устанавливают верхнее, правое, нижнее и левое поля соответственно. Отрицательные значения недопустимы.

Свойства не наследуются.

padding-top/padding-right/padding-bottom/padding-left
Значения:
длинаПоля элемента задаются при помощи единиц длины, например, px , pt , cm . Значение по умолчанию 0 .
%Вычисляются относительно ширины родительского элемента, могут меняться при изменении ширины элемента. Поля сверху и снизу равны полям слева и справа, т.е. верхние и нижние поля тоже вычисляются относительно ширины элемента.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

3.2. Краткая запись полей: свойство padding

Свойство padding является сокращенным свойством для установки padding-top , padding-right , padding-bottom и padding-left в одном объявлении.

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

Если есть два значения, верхнее и нижнее поля устанавливаются на первое значение, а правое и левое — на второе.

Если имеется три значения, верхнее поле устанавливается на первое значение, левое и правое — на второе, а нижнее — на третье.

Если есть четыре значения — они применяются сверху, справа, снизу и слева соответственно.

4. Рамки элемента

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

Статья в тему:  Что делает биолог. Кто такой биолог и чем он занимается? Востребованность профессии биолог

Внутренние ( padding ) и внешние ( margin ) отступы [ править ]

Свойство padding определяет расстояние от содержимого блока до его границы, а margin — расстояние между границами соседних элементов.

На внутренние отступы распространяется фоновый цвет элемента, а на внешние — нет. Внешние отступы обладают таким эффектом как схлопывание, то есть объединение значений. Внутренние и внешние отступы можно задавать либо в сокращённой форме, либо для каждой из сторон отдельно. Значения для внешних отступов могут быть отрицательными, а для внутренних — нет.

  • padding/margin-top — верхний отступ (внутренний/внешний)
  • padding/margin-right — правый отступ (внутренний/внешний)
  • padding/margin-bottom — нижний отступ (внутренний/внешний)
  • padding/margin-left — левый отступ (внутренний/внешний)
  • padding/margin — отступ (внутренний/внешний) (сокращённая форма)

Что такое CSS Box Model?

При использовании CSS каждый элемент HTML на веб-странице рассматривается как прямоугольный блок. Следовательно, концепция называется коробчатой ​​моделью. Это помогает легко определить макет веб-страницы и расположить элементы для выравнивания по своему усмотрению. В блочной модели содержимое HTML-элемента располагается по центру, за ним следуют отступы, границы и поля, как показано ниже:

Элемент модели CSS Box

  • Маржа – это область вокруг границы, всегда прозрачная. Назначение поля – обеспечить необходимое пространство между элементами и от краев браузера.
  • Граница – это видимая линия вокруг области содержимого и заполнения. Обычно он используется для контура элемента и может иметь любой цвет и ширину.
  • Заполнение – пространство между фактическим содержимым и границей называется отступом. Если у содержимого есть видимые линии границ, уместно использовать отступы. Это поможет создать пространство между содержимым и рамкой.
  • Содержимое – фактическое содержимое, такое как текст и изображение между тегами HTML.
Статья в тему:  Беспорядок в душе - беспорядок в доме. Как беспорядок влияет на человека

Пример элемента блочной модели

Давайте сделаем простой пример создания абзаца в тегах div, чтобы объяснить концепцию блочной модели. CSS должен выглядеть следующим образом:

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

И HTML для вставки содержимого с приведенным выше css:

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

Просмотр блочной модели CSS элемента в браузере IE 11

Как проверить блочную модель CSS в браузере?

Хорошая идея – увидеть теорию на практике. Вы можете увидеть блочную модель элемента CSS прямо в браузере. Здесь мы показываем снимок экрана с браузером Google Chrome. Метод остается таким же для всех других браузеров, таких как Firefox, Edge и Safari.

  • Откройте любую веб-страницу и щелкните правой кнопкой мыши элемент, который хотите изучить.
  • Вы можете щелкнуть правой кнопкой мыши любой текст, изображение, видео или пустое место.
  • Выберите вариант «Проверить элемент», чтобы открыть консоль разработчика.
  • Он имеет левую панель для просмотра HTML и правую панель для просмотра CSS.
  • Вы можете увидеть модель блока CSS выбранного элемента на вкладке «Макет» правой панели.
  • Ссылаясь на приведенный выше пример кода – все границы, поля и отступы будут соответствовать точным размерам, как определено в CSS.
Статья в тему:  Арифметическая прогрессия задана формулой 4 3n. Разность арифметической прогрессии. Свойство арифметической прогрессии

Обратите внимание: вы можете просмотреть HTML-разметку элемента в браузере Google Chrome на вкладке «Элементы». Соответствующие CSS и блочную модель можно увидеть на вкладке «Стили», как показано на рисунке ниже.

Просмотр блочной модели CSS элемента в браузере Chrome

Расчет ширины и высоты элемента в блочной модели CSS

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

Статьи по Теме:

Теперь любой элемент, который вызывает стиль CSS-класса «box-model», должен располагаться со следующей общей шириной и общей высотой.

  • Общая высота = высота + верхнее поле + нижнее поле + верхнее заполнение + нижнее заполнение + ширина границы = 200 + 30 + 5 + 10 + 10 + 10 = 265 пикселей.
  • Общая ширина = ширина + левое поле + правое поле + левое поле + правое поле + ширина границы = 300 + 15 + 5 + 0 + 5 + 10 = 335 пикселей.

Полный макет страницы будет разработан с учетом общей ширины и общей высоты каждого элемента.

Ссылка на основную публикацию
Статьи c упоминанием слов:

Adblock
detector