Всем привет, в этой статье мы разберемся что же такое блочная модель #CSS и как это работает.
Для начала стоить понимать, что все элементы, которые вы видите на странице имеют прямоугольную форму. Заголовок, круг, треугольник, боковая модель и пр. – это модифицированные видоизмененные прямоугольники и это всегда нужно помнить.
Второй важный момент, влияющий на использование блочной модели css - это разделение html-элементов на строчные и блочные.
(Разделение элементов на блочные и строчные используется в спецификации HTML до версии 4.01. В HTML5 это двоичное различие заменено более сложным набором категорий контента. Категория «блоков» примерно соответствует категории основного потока в HTML5, а «строчные» элементы аналогичны текстовому контенту. Кроме того, есть и другие категории.)
Если элемент определен как блочный, то он будет занимать все доступное ему пространство , в то время как строчный элемент занимает пространство равное своему контенту. Например:
Из этого следует еще одно различие - блочный элемент будет начинаться с новой строки. Строчные же располагаются друг за другом в пределах одной строки. Например, поменяем картинку и блок местами - произойдет так:
потому что тег <img> определяется как строчный.
Так же блоки могут содержать строчные элементы и другие блочные элементы внутри себя. Поместим ссылку внутрь тега <div>
Итак, для того, чтобы управлять внешним видом элементов, определять их размер и расположение нам и нужна блочная модель css.
Ниже изображена вся блочная система, с которой мы сегодня будем разбираться.
И как в любом прямоугольнике, у любого #html-элемента есть две главные величины - это ширина и высота.
Пунктирными линиями здесь выделены параметры самого контента, то есть блока, который будет существовать на странице. (это может быть текст, изображение и др.)
Внутренний отступ (#padding ) - это расстояние между основным содержимым и его границей (рамкой). Если для элемента задать фон, то он распространится также и на поля элемента.
У этого блока есть также некая граница от внешнего мира(не всегда видимая) - в данном случае вот эта черная большая рамка, которая называется #border Если цвет рамки не задан, она принимает цвет основного содержимого элемента, например, текста. Если рамка имеет разрывы, то сквозь них будет проступать фон элемента.
#margin - внешний отступ. Он добавляет расстояние снаружи элемента от внешней границы рамки до соседних элементов, тем самым разделяя элементы на странице. Внешние отступы всегда остаются прозрачными и через них виден фон родительского элемента.
Возьмем 3 разных объекта: картинка, заголовок h1, и блок.
Блоку и картинке задаем размеры 300х300. Блоку также задаем любой цвет с помощью #background-color.
Сбрасываем стили браузера по умолчанию:
* {
margin: 0;
padding: 0;
}
Значения padding и margin задаются в следующем порядке:
Если мы укажем "margin: 2px 4px 6px 8px;" будет означать то, что сверху от нашего блока отступ 2 пикселя, справа — 4, снизу — 6, а слева — 8. Т.е. эта запись будет эквивалентна такой:
margin-top: 2px;
margin-right: 4px;
margin-bottom: 6px;
margin-left: 8px;
Это сборное CSS правило, которое во многих случаях позволяет сократить размер кода.
Одно значение, например, "margin: 20px;" будет означать одинаковый внешний отступ со всех сторон от нашего Html элемента.
Применим свойства margin: 20px; и padding: 20px; ко всем элементам.
Напомню, что <div> является сейчас блочным элементом, поэтому слева margin растягивается на всю доступную площадь. Как это поменять мы рассмотрим чуть позже.
H1 ведет себя подобным образом
Кстати, вы заметили изменения элементов после применения отступов?
Выше мы определили им высоту и ширину содержимого, прописав свойства width и height со значениями 300px.
Сейчас же их размер - 340х340. Как это произошло?
Дело в том, что по умолчанию браузеры используют стандартную блочную модель (box-sizing: content-box). Это значит, что отступы и рамки добавляются к заданным ширине и высоте контента.
Поэтому пространство, занимаемое объектом, теперь равно 340px в ширину (300px + 20px + 20px) и так же 340px в высоту (300px + 20px + 20px), поскольку отступы и рамки добавляются к размерам поля содержимого.
Примечание: Внешний отступ(margin) не считается в фактическом размере объекта. Конечно, он влияет на общее пространство, занимаемое объектом на странице, но только на внешнюю часть. Область элемента заканчивается на рамке — она не распространяется за нее.
Это довольно неудобно - постоянно добавлять рамки и отступы, чтобы получить реальный размер элемента, по этой причине в CSS была введена альтернативная блочная модель.
При ее использовании любая ширина — это ширина видимой части элемента на странице.
Если вы хотите использовать альтернативную блочную модель, то установите свойство #box-sizing: border-box; для одного элемента, либо для всей страницы в целом с помощью селектора html
Строчные же элементы игнорируют верхние и нижние margin и padding, но если для элемента задан фон, он будет распространяться на верхний и нижний padding, заходя на соседние строки текста.
Ширина и высота строчного элемента зависит только от его содержимого, задать размеры с помощью CSS нельзя. Можно увеличить расстояние между соседними элементами по горизонтали с помощью горизонтальных отступов.
Как правило, строчные элементы могут содержать только данные и другие строчные элементы, за исключением элемента <a>. Этим тегом можно оборачивать целые абзацы, списки, таблицы, заголовки и целые разделы при условии, что они не содержат другие интерактивные элементы — другие ссылки и кнопки.
Преобразование в блочный/строчный элемент
Иногда бывает необходимо, чтобы строчный элемент вел себя как блочный и наоборот. Для этого необходимо установить соответствующее значение свойства #display.
Например, мы хотим превратить ссылку в блок. Для этого устанавливаем для тега <a> свойство display: block;, установим любой фон и размеры блока, пусть будет 100%. Вот так:
Теперь весь блок является ссылкой, а не только текст ссылки.
Значение 100% в width и height позволяют содержимому занять все пространство, за исключением внутренних отступов блока, в котором он находится.
Но давайте установим определенную ширину блока, установим так же отступы, например так:
Существует еще одна группа элементов, которые браузер обрабатывает как строчно-блочные {display: inline-block;}. Такие элементы являются встроенным, но для них можно задавать поля, отступы, ширину и высоту.
Характеристики этих элементов следующие
- Внутрь строчно-блочных элементов допустимо помещать текст, строчные или блочные элементы.
- Несколько элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
- Можно выравнивать по вертикали с помощью свойства vertical-align.
- Разрешено задавать ширину и высоту.
устанавливаем данное свойство блоку
Теперь изменим границы. Границы есть всегда, просто мы их не видим. Изменим это с помощью свойства border.
Важно знать, что это свойство принимает три значения: width, style и color. Width отвечает за толщину границы, может задаваться как с помощью цифр в Em, Ex или Px, так и словами:
Thin — тонкая линия;
Medium — средняя (данное значение используется по умолчанию);
Thick — толстая.
#CSS свойство #Border-style позволяет задать словами тип рамки:
- None — без рамки (используется по умолчанию)
- Dotted — линия отрисовывается точками
- Dashed — пунктиром
- Solid — сплошной линией
- Double — двойной линией
- Groove — вдавленная рамка
- Ridge — выпирающая
- Inset и outset — игры с тенью
По умолчанию, если цвет для рамки не задан, то будет использоваться тот, который используется для шрифта внутри данного элемента. В качестве значения цвета можно прописать как словом вроде «red», так и hex-значением цвета.
Установим для картинки border: 7px solid gray;
Получаем результат:
Также обратите внимание, что для разных сторон можно установить разные типы границ с помощью свойств border-top, border-right, border-bottom и border-left.
Применим к заголовку нижнюю рамку с помощью
border-bottom: 5px double darkblue;
Вот такой результат получился✧ (кстати, альбом замечательный, послушайте:) )
И еще увидимся✧