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

держится вся блочная верстка

строчное поведение

inline-block - смешанное поведение

none - элемент скрыт

.element {

display: block;
}

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

css

и внешние отступы
разница в поведении
СТРОЧНЫЕ:

выстраиваются в строку
могут иметь внешние

отступы только справа или слева.
воспринимаются браузером как элемент строки (“слово”).
имеют между собой обязательные отступы в зависимости от размера шрифта

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

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

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

блоки с флоатом

блок

блок.
ву - аля, сэр, извольте получить!

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

class="float-2">




Я блок снизу

html
.float-1, .float-2 {

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

css

браузер

значение этого свойства отлично от стандартного, то на элемент

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

значение для всех элементов. При нем свойства позиционирования на

элемент не действуют.

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

absolute - значение задающее позицию относительно элемента родителя (со значение отличным от static)

fixed - задает поведение позиционирования относительно окна браузера