- •Построение сеток
- •Что такое сетка?
- •Поток документа
- •Поток документа
- •Блочная модель
- •Строчные боксы
- •собенности строчных боксов 16
- •собенности строчных боксов 17
- •войства блочной модели
- •idth – ширина содержимого 19
- •eight – высота содержимого 20
- •Типы боксов
- •Блочные боксы
- •собенности блочных боксов 13
- •собенности блочных боксов 14
- •Пример width и height
- •имер width одновременно height22
- •Дополнительные свойства 24
- •adding – внутренние отступы 24
- •adding с разных сторон
- •Примеры padding
- •margin – внешние отступы
- •margin с разных сторон
- •Примеры margin
- •border - рамки
- •омпоненты и стороны border 32
- •Примеры border
- •Примеры border
- •Строчные боксы
- •асчет размера блочного бокса 36
- •асчет размера блочного бокса 37
- •асчет размера блочного бокса 38
- •асчет размера блочного бокса 39
- •асчет размера блочного бокса 40
- •асчет размера блочного бокса 41
- •асчет размера блочного бокса 42
- •собенности блочной модели
- •хлопывание внешних отступов 44
- •ыпадание внешних оступов
- •редства против выпадания маргинов46
- •сположение элементов по центру47
- •width: auto и width: 100%
- •width: auto и width: 100%
- •Свойство box-sizing
- •пособ использования box-sizing 51
- •пособ использования box-sizing 52
Типы боксов |
11 |
|
Тип бокса задаётся свойством display.
–Блочные (display: block).
–Строчные (display: inline).
–Блочно-строчные (display: inline-block).
–Гибкие или «флексы» (display: flex).
–Гридовые (display: grid).
–Табличные (display: table).
–И другие.
Блочные боксы |
12 |
|
Блочный бокс — это прямоугольная область на странице.
Блочными боксами по умолчанию обладают:
<div> <section> <h1>…<h6><p><ul><ol>
и другие теги для выделения крупных блоков текста.
собенности блочных боксов 13
–Принудительный перенос строки до и после.
–Воспринимают ширину, высоту, внутренние и внешние отступы.
–Занимают всё доступное по ширине пространство.
–По высоте подстраиваются под содержимое.
собенности блочных боксов 14
Строчные боксы |
15 |
|
Строчные боксы — фрагменты текста.
Строчными боксами по умолчанию обладают:
<span> <a> <strong><em><b><i><time>
и другие теги для выделения небольших кусочков текста.
собенности строчных боксов 16
–Нет переносов строки до и после — можно располагать в одной строке.
–Ширина и высота зависят только от содержания, задать размеры с помощью CSS нельзя.
–Воспринимают только горизонтальные отступы.
–Ведут себя как текст.
собенности строчных боксов 17
войства блочной модели |
18 |
|
Влияют на размер элемента:
–width,
–height,
–margin,
–padding,
–border.
idth – ширина содержимого 19
