Свойство display и его position

Блочный элемент в верстке обозначается тэгом div.

Чем div отличается от p?

Тэгом p в верстке обозначается абзац текста. Использовать его в качестве блока лучше не надо. Это может спровоцировать конфликты CSS, при использовании визуального редактора в административном разделе.

Вот такой код рекомендуется использовать для абзаца во всем проекте. Больше ничего не нужно, ну разве что увеличивать шрифт и менять цвет текста для некоторых блоков:

p{
margin-bottom: 5px;
}

div.news p{
font-size:14px;
}
Не нужно прописывать блочным элементам в CSS свойство display:block — это повод поблагодарить кэпа.

Position для DIV

Ну а теперь самое интересное — позиционирование. Когда блок размещен на странице у него есть стандартные параметры: ширина 100% родителя, позиционирование static. В таком позиционировании блок в странице, как в стакане: сдвигаешь его — сдвигается все что под ним( или над ним если сдвигаешь от низа).

Есть возможность добавить блоку свойство float:left(right). В этом случае блок в размере уменьшается до размеров своего содержимого, а все что идет ниже — обтекает его справа или слева.

Блок родитель, внутри которого есть div c float: left или right, теряет свою высоту. В этом случае необходимо добавить ему в CSS псевдоэлемент.
div.block_price{
margin-bottom:20px;
}
div.block_price .left{
float:left;
}
div.block_price .right{
float:right;
}
div.block_price:after{
content: ' ';
display:block;
clear:both;
}

Если не прописать псевдоэлемент, то отступ вниз не сработает.

position relative

Если элементу присвоено в css свойство position:relative, то ведет он себя следующим образом:

  1. элемент по умолчанию занимает свое место в «стакане» страницы, его ширина и высота.
  2. Элемент можно сдвинуть свойствами left, right, top, bottom — он будет сдвинут так, как будто его нет на странице. С заездом на соседние элементы.
  3. Свойствами margin элемент будет сдвигаться без «наложения» на соседние элементы

position absolute

Очень важно понять работу этого значения. Оно является основополагающим для блочной верстки html-страниц. Если элементу присвоено данное свойство в css, он отображается браузером так, как будто отсутствует в общей очереди. Управление позицией элемента выполняется с помощью left, right, top, bottom. Отсчет ведется от границ блока-родителя. Блоком-родителем будет первый блок, в котором расположен наш с position:absolute и у которого свойство position установлено в значение relative, absolute или fixed. Если таких блоков в дереве html разметки не нашлось, отсчет пойдет от левого верхнего угла страницы.

Не удивляйтесь тому, что добавленный в футере блок с кодом:

.footer .imageBox{
	position:absolute;
	left:10px;
	top:10px;
}

окажется где-то в header, хотя должен быть в footer, в 10 пикселях от верхнего левого угла. Ситуацию исправит одна строчка:

.footer{
	position:relative;
}

Также очень важно и то, что свойствам позиционировния можно давать отрицательные значения, то есть размещать элементы за границами блока, на определенном расстоянии. Это актуально для крестиков закрывающих popup, иконок рядом с пунктами меню и других различных элементов дизайна сайта.

Задавайте название класса блока так, чтобы было понятно что находится в блоке. Если новости, то .news, контент - .content и.т.д.

position fixed

Когда у блока position fixed, на него перестает действовать скролл окна. Позиционирование задает его расположение от края окна и прокрутка страницы не влияет на его положение. Элемент можно сдвинуть свойствами left, right, top, bottom. Очень полезное свойство, с помощью которого можно делать popup-ы, различные закладки, окна, панели.

Если задать блоку с position:fixed свойства top и bottom по 25px и не задавать высоту — она автоматически будет рассчитываться браузером, до нижнего и верхнего края окна с отступом 25px

.popup{
	position:fixed;
	top:25px;
	bottom:25px;
}
31 Января 2014
Последние новости
29 Сентября 2016
Создан интернет-магазин для компании «Надеко»
29 Июля 2016
Создан сайт для компании «ACS Termal»
Сделать заказ
Нужен интернет-магазин?