Добавил:
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Лекция 4. Построение сеток.pptx
Скачиваний:
1
Добавлен:
27.05.2026
Размер:
3 Мб
Скачать
☆

Типы боксов

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

eight – высота содержимого 20