Верстка. Основы построения лэйаута

Август 10, 2022

Главная
Информатика
Верстка. Основы построения лэйаута

Содержание

2. div & span это два основных элемента на которых держится вся блочная верстка
3. блочные и строчные элементы
4. display - определяет поведение block - блочное поведение inline - строчное поведение inline-block - смешанное поведение
5. БЛОЧНЫЕ: выстраиваются в столбец можно задать размеры (высоту, ширину) имеют внутренние и внешние отступы разница в
6. “Блочная модель элемента”
7. в реальной жизни
8. “обтекание” float - определяет по какой стороне (правой или левой) будет выравниваться элемент, при том что
9. Основная проблема флоатов.
10. шаг 1. Создаем блоки с флоатом
11. шаг 2. Создаем блок в который будут вложены блоки с флоатом
12. шаг 3. Кладем под него еще один произвольный блок
13. шаг 4. Добавляем блоки с флоатом в верхний блок. ву - аля, сэр, извольте получить!
14. структура этого безобразия: Я блок снизу
15. лекарство - свойство clear Я блок снизу html .float-1, .float-2 { float: left; width: 200px; }
16. другие способы позиционирования Правила позиционирования задаются свойством position. Если значение этого свойства отлично от стандартного, то
17. другие способы позиционирования Значение свойства position: static - стандартное (дефолтное) значение для всех элементов. При нем
19. Скачать презентацию

Слайд 2

div & span
это два основных элемента на которых держится вся блочная

верстка

Слайд 3

блочные и строчные элементы

Слайд 4

display - определяет поведение
block - блочное поведение
inline - строчное поведение
inline-block -

смешанное поведение
none - элемент скрыт

.element {
display: block;
}

примечание: существует множество значений свойства display. Указанные - основные, частоиспользуемые.

css

Слайд 5

БЛОЧНЫЕ:
выстраиваются в столбец
можно задать размеры (высоту, ширину)
имеют внутренние и внешние отступы
разница

в поведении

СТРОЧНЫЕ:
выстраиваются в строку
могут иметь внешние отступы только справа или слева.
воспринимаются браузером как элемент строки (“слово”).
имеют между собой обязательные отступы в зависимости от размера шрифта

Слайд 6

“Блочная модель элемента”

Слайд 7

в реальной жизни

Слайд 8

“обтекание”
float - определяет по какой стороне (правой или левой) будет выравниваться

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

“Обтекание” - задается свойством float.

Слайд 9

Основная проблема флоатов.

Слайд 10

шаг 1. Создаем блоки с флоатом

Слайд 11

шаг 2. Создаем блок в который будут вложены блоки с флоатом

Слайд 12

шаг 3. Кладем под него еще один произвольный блок

Слайд 13

шаг 4. Добавляем блоки с флоатом в верхний блок.
ву - аля,

сэр, извольте получить!

Слайд 14

структура этого безобразия:

Я блок

снизу

Слайд 15

лекарство - свойство clear

class="wrap-bottom">
Я блок снизу

html

.float-1, .float-2 {
float: left;
width: 200px;
}
.div-clear {
clear: both;
}

css

браузер

Слайд 16

другие способы позиционирования
Правила позиционирования задаются свойством position. Если значение этого свойства

отлично от стандартного, то на элемент начинают действовать свойства позиционирования. Такие как top, right, bottom, left;

Слайд 17

другие способы позиционирования
Значение свойства position:
static - стандартное (дефолтное) значение для всех

элементов. При нем свойства позиционирования на элемент не действуют.
relative - задает элемент-родитель относительно которого будут отпозиционированы его дети (чайлды).
absolute - значение задающее позицию относительно элемента родителя (со значение отличным от static)
fixed - задает поведение позиционирования относительно окна браузера

Верстка. Основы построения лэйаута

Содержание

div & spanэто два основных элемента на которых держится вся блочная

блочные и строчные элементы

display - определяет поведениеblock - блочное поведениеinline - строчное поведениеinline-block -

БЛОЧНЫЕ:выстраиваются в столбецможно задать размеры (высоту, ширину)имеют внутренние и внешние отступыразница