Блочные и строчные элементы. Часть 2

Продолжим изучение темы блочные и строчные элементы. Если пропустили прошлую статью, то вот ссылка на нее: Блочные и строчные элементы. Часть 1

Модель визуального форматирования CSS в деталях

Содержание:

Часть 1

1. Модель визуального форматирования

2. Блочные элементы и блочные контейнеры

3. Строчные элементы и строчные контейнеры

4. Строчно-блочные элементы

5. Ширина содержимого: свойство width

Часть 2

6. Минимальная и максимальная ширина: свойства min-width и max-width

7. Высота содержимого: свойство height

8. Минимальная и максимальная высота: свойства min-height и max-height

9. Расчет высоты строки: свойства line-height и vertical-align

10. Изменение блочной модели: свойство box-sizing

6. Минимальная и максимальная ширина: свойства min-width и max-width

Свойства min-width и max-width позволяют ограничивать ширину содержимого до определенного диапазона. Значения не могут быть отрицательными. Для min-width значение по умолчанию 0, для max-width — none.

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

min-width/max-width

Значения:

длина - Задает фиксированную минимальную или максимальную используемую ширину.
% - Указывает процент для определения используемого значения. Процент рассчитывается относительно ширины содержащего блока.
none - Означает отсутствие ограничений ширины блока.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

CSS

min-width: 100px;
min-width: 10em;
min-width: 50%;
min-width: inherit;

CSS

max-width: 500px;
max-width: 20em;
max-width: 80%;
max-width: none;
max-width: inherit;

7. Высота содержимого: свойство height

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

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

height

Значения:

длина - Высота области содержимого задается в единицах длины.
% - Задает высоту в процентах. Процент рассчитывается относительно высоты содержащего блока. Если высота содержащего блока не указана явно (то есть зависит от высоты содержимого) и этот элемент не является абсолютно позиционированным, значение вычисляется как auto. Для абсолютно позиционированных элементов процент вычисляется с учетом высоты области отступов padding содержащего блока.
auto - Высота зависит от значений других свойств. Значение по умолчанию.
inherit - Наследует значение свойства от родительского элемента.

Синтаксис

CSS

height: 100px;
height: 10em;
height: 50%;
height: auto;
width: inherit;

8. Минимальная и максимальная высота: свойства min-height и max-height

Иногда полезно ограничить высоту элементов определенным диапазоном. Свойства min-height и max-height предлагают эту функциональность.

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

min-height/max-height

Значения:

длина - Задает фиксированную минимальную или максимальную вычисленную высоту в единицах длины. Значения не могут быть отрицательными.
% - Указывает процент для определения используемого значения. Процент рассчитывается относительно высоты содержащего блока. Если высота содержащего блока не указана явно (т.е. зависит от высоты содержимого) и этот элемент не является абсолютно позиционированным, процентное значение обрабатывается как 0 для min-height или none для max-height.
none - Отсутствие ограничений высоты блока, только для max-height.
inherit - Наследует значение свойства от родительского элемента.

Синтаксис

CSS

min-height: 100px;
min-height: 2em;
min-height: 50%;
min-height: inherit;

CSS

max-height: 500px;
max-height: 20em;
max-height: 80%;
max-height: none;
max-height: inherit;

9. Расчет высоты строки: свойства line-height и vertical-align

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

Высота каждого встроенного прямоугольника в линейном блоке вычисляется. Для замещаемых, inline-block и inline-table элементов это высота их области поля (margin box)
Блоки уровня строки выравниваются вертикально в соответствии со значением свойства vertical-align. Если они выровнены по верху или по низу, они должны быть выровнены так, чтобы минимизировать высоту линейного блока.

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

В элементе уровня блока, содержимое которого состоит из элементов встроенного уровня, свойство line-height определяет минимальную высоту линейных блоков внутри элемента. Минимальная высота состоит из минимальной высоты над базовой линией и минимальной глубины под ней.

Для элементов уровня строки line-height указывает высоту, которая используется при расчете высоты линейного блока.

Отрицательные значения не допустимы.

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

line-height

Значения:

normal - Сообщает пользовательским агентам установить «разумное» значение на основе шрифта элемента. Значение по умолчанию. Когда элемент содержит текст, отображаемый более чем одним шрифтом, пользовательские агенты могут определить значение normal в соответствии с наибольшим размером шрифта.
длина - Значение задаётся в единицах длины, создавая фиксированное значение высоты строки. Если задать значение меньше единицы, смежные строки будут находить друг на друга.
число - Используемое значение свойства — это число, умноженное на размер шрифта элемента.
% - Вычисленное значение свойства — это процент, умноженный на вычисленный размер шрифта элемента.
inherit - Наследует значение свойства от родительского элемента.

Синтаксис

CSS

line-height: normal;
line-height: 2em;
line-height: 1.5;
line-height: 50%;
line-height: inherit;

📷 РИС. 4. КОНТЕЙНЕР СТРОКИ

Свойство vertical-align влияет на вертикальное позиционирование в линейном блоке элементов уровня строки: display: inline и display: table-cell. Значения этого свойства имеют другие значения в контексте таблиц.

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

vertical-align

Значения:

baseline - Выравнивает базовую линию элемента по базовой линии его родителя, совмещая среднюю линию элемента со средней линией родительского элемента.
sub - Делает элемент подстрочным (аналогично с тегом <sub>). Величина понижения элемента может меняться в зависимости от браузера пользователя.
super - Делает элемент надстрочным (аналогично с тегом <sup>). При этом значения sup и super не меняют размер шрифта, по умолчанию текст надстрочного и подстрочного элемента имеет такой же размер, как и текст родительского элемента.
top - Верхний край элемента совмещается с верхним краем самого высокого элемента в линии.
text-top - Верхний край элемента совмещается с верхним краем шрифта родительского элемента.
middle - Средняя линия элемента (обычно изображения) совмещается с линией, проходящей через середину родительского элемента.
bottom - Нижний край элемента совмещается с нижним краем самого низкого элемента в линии.
text-bottom - Нижний край элемента совмещается с нижним краем шрифта родительского элемента.
% - Не позволяет устанавливать middle, вычисляется как часть line-height элемента, а не его родителя, т.е. если установить значение vertical-align, равное 50% для элемента с line-height равным 20рх, то базовая линия элемента поднимется на 10px.
длина - Устанавливает значение в единицах длины, перемещая элемент на заданное расстояние.
inherit - Наследует значение свойства от родительского элемента.

Синтаксис

CSS

vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
vertical-align: 6em;
vertical-align: 10px;
vertical-align: 25%;
vertical-align: inherit;

📷 РИС. 5. СВОЙСТВО VERTICAL-ALIGN

10. Изменение блочной модели: свойство box-sizing

Свойство box-sizing переключает блочную модель с фиксированных размеров длины и ширины на content-box и border-box. Это влияет на интерпретацию всех свойств, определяющих размеры, включая flex-basis.

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

box-sizing

Значения:

content-box - Это поведение ширины и высоты, как указано в CSS2.1. Заданные ширина и высота (и соответствующие min/max-свойства) применяются к ширине и высоте области содержимого элемента. Поля padding и рамка border элемента располагаются за пределами указанной ширины и высоты. Значение по умолчанию.
border-box - Любые padding или border, заданные для элемента, размечаются и отрисовываются внутри указанных значений ширины и высоты. Ширина и высота содержимого вычисляются путем вычитания ширины границ и полей соответствующих сторон из указанных свойств ширины и высоты. Значение auto свойств width и height не зависит от свойства box-sizing и всегда устанавливает размер блока с содержимым. Сумма padding и border не должна превышать заданные значения width и height, в противном случае размер области содержимого будет равен нулю.
initial - Устанавливает значение свойства в значение по умолчанию.
inherit - Наследует значение свойства от родительского элемента.

Некоторые html-элементы, например, <button>, по умолчанию имеют box-sizing: border-box.

Синтаксис

CSS

box-sizing: content-box;
box-sizing: border-box;
box-sizing: inherit;
box-sizing: initial;

Источник ↗