Какие css свойства влияют на блочную модель

CSS/Блочная Модель

Типы элементов (свойство display ) [ править ]

Свойство display определяет поведение элемента в документе.

Например, с помощью этого свойства строчный элемент можно определить как блочный или наоборот.

  • block — блочный элемент (значение по умолчанию в CSS1) (CSS1)
  • inline — строчный элемент (значение по умолчанию в CSS2/CSS2.1 и выше) (CSS1)
  • list-item — блочный элемент с маркером списка (CSS1)
  • none — элемент удаляется из потока документа без сохранения места (CSS1)
  • inline-block — блочный элемент с поведением, аналогичным строчному (CSS2.1)
  • table — блочная таблица (table) (CSS2)
  • inline-table — строчная таблица (table) (CSS2)
  • table-row — строка таблицы (tr) (CSS2)
  • table-cell — ячейка таблицы (td, th) (CSS2)
  • table-caption — заголовок таблицы (caption) (CSS2)
  • table-column — колонка таблицы (col) (CSS2)
  • table-column-group — группа колонок (colgroup) (CSS2)
  • table-header-group — верхняя часть таблицы (шапка) (thead) (CSS2)
  • table-row-group — тело таблицы (tbody) (CSS2)
  • table-footer-group — нижняя часть таблицы (подвал) (tfoot) (CSS2)

В скобках для табличных значений этого свойства указаны html-элементы с аналогичным поведением.

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

Блочная модель (Box model) [ править ]

Это одна из основ в понимании CSS, модель форматирования документа. Определяет формирование размеров элементов на странице, их взаимодействие между собой.

  • content — содержимое блока, информация;
  • padding — внутренний отступ;
  • border и outline — граница и внешняя граница; (второе свойство не участвует в формировании размеров блока)
  • margin — внешний отступ;
  • height и width — высота и ширина элемента.

В IE4 и IE5 высота и ширина блока формируются с учётом padding и border .

В IE6 в режиме совместимости (quirks mode) также.

Согласно спецификации W3C CSS высота и ширина определяются исключительно содержимым без учёта других свойств.

На следующем рисунке сравниваются блочные модели W3C и IE4/IE5:

В CSS3 появилось свойство box-sizing для поддержки блочной модели IE4/IE5.

В следующих разделах будет более подробное описание свойств с примерами.

Высота ( height ) и ширина ( width ) элемента [ править ]

  • height — высота;
  • min-height — минимальная высота;
  • max-height — максимальная высота;
  • width — ширина;
  • min-width — минимальная ширина;
  • max-width — максимальная ширина.

Эти свойства могут задаваться в различных единицах CSS.

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

В этом примере ширина сайта 960px, а максимальная ширина абзаца не больше 60% ширины сайта.

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

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

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

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

Границы ( border/outline ) элемента [ править ]

Границы позволяют визуально отделить один элемент от другого.

Свойство border-color позволяет задать цвет границы, border-style — её стиль и border-width — толщину.

Можно задать все эти три свойства в сокращённой форме, перечислив их через пробел в свойстве border .

Или указать для каждой из сторон ( border-top , border-right , border-bottom , border-left ) необходимые свойства отдельно.

Свойство outline позволяет задавать цвет ( outline-color ), стиль ( outline-style ) и толщину ( outline-width ) внешней границы только для всех сторон одновременно. И это свойство не участвует в формировании размеров блока.

В сокращённой форме свойства внешней границы записываются через пробел в свойстве outline .

  • border
  • border-color

Значения цвета указываются с помощью одного из стандартных способов.

  • border-style
  • none (CSS1)
  • hidden (CSS2/CSS2.1)
  • dotted (CSS1)
  • dashed (CSS1)
  • solid (CSS1)
  • double (CSS1)
  • groove (CSS1)
  • ridge (CSS1)
  • inset (CSS1)
  • outset (CSS1)
  • border-width

Значения этого свойства указываются либо с помощью неотрицательных значений, либо с помощью ключевых слов thin, medium, thick (третье значение больше).

  • border-top
  • border-right
  • border-bottom
  • border-left
  • border-top-color/style/width
  • border-right-color/style/width
  • border-bottom-color/style/width
  • border-left-color/style/width
  • outline
  • outline-color
  • outline-style
  • outline-width

Значения для последних четырёх свойств аналогичны значениям для border , кроме свойства outline-style , которое не поддерживает значение hidden.

Сокращённая запись свойств [ править ]

Для сокращённых свойств padding , margin , border-color/style/width используется мнемоническое правило TRouBLe от английских названий сторон (top/right/bottom/left, то есть верх/право/низ/лево).

В этом примере значения свойства определяют стороны следующим образом:

4 значения: T+R+B+L;

3 значения: T+RL+B;

2 значения: TB+RL;

1 значение: TRBL.

Для сокращённых свойств ( border , border-top/right/bottom/left , outline ) их значения записываются через пробел.

Для других свойств смотрите сокращённые свойства.

Свойство box-sizing [ править ]

Это свойство впервые появилось в CSS3.

Оно позволяет переключаться с блочной модели W3C на блочную модель IE4/IE5.

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

При добавлении стилей к блокам вы можете заметить, что одни стили взаимодействуют с другими. Например, правило border взаимодействует с padding — границы учитывают внутренний отступ и отодвигаются от контента внутри. Также свойство padding увеличивает ширину и высоту блока, как бы «растягивая его».

Данные особенности называются блочной моделью (box-model). По этой модели браузеры «рисуют» блок, наслаивая правила друг на друга.

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

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

Задание

Добавьте в редактор div с классом card-hello и установите следующие правила:
* цвет фона #FA7268
* цвет текста белый #FFFFFF
* ширина блока: 230 пикселей
* высота блока 25 пикселей
* внутренние отступы 20 пикселей
* внешние отступы 10 пикселей
* рамка шириной 2 пикселя, сплошная. Цвет #9C27B0
* размер шрифта 20 пикселей

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

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

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

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

Схематичное изображение блочной модели

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

Скриншот блочной модели из инструментов разработчика браузера Chrome

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

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

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

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

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

По умолчанию элементы с блочным отображением ( 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 , не прибавляются непосредственно к размерам элемента, но влияют на то, сколько места на странице он занимает.

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

box-sizing

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *