Создание сайтов

Реклама в интернете

Графический дизайн

Фирменный стиль

 



Статьи → Web-разработка → Дивная верстка. Блочные элементы.

Блочный элемент - элемент, который отображается на веб-странице в виде прямоугольника. Он занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся контейнеры <DIV>, <H1> и <P>.

Допускается вкладывать один блочный элемент внутрь другого, а также размещать внутри них встроенные элементы, например <SPAN>. Запрещено добавлять внутрь встроенных элементов блочные.
<div><p>Учимся верстать слоями</p></div>
<h2><a href="/articles/11">Учимся верстать слоями</a></h2>
В данном примере параграф (тег <P>) вставляется внутрь контейнера <DIV>, а ссылка (тег <A>) — в заголовок <H2>. Кстати, ошибкой будет поступить наоборот — добавить <H2> в контейнер <A> (<a href="/articles/11"><h2>Учимся верстать слоями</h2></a>), поскольку тег <A> не относится к блочным элементам.

Ширина блочных элементов
По умолчанию ширина блока вычисляется автоматически и занимает все доступное пространство. Например, если тег <DIV> в коде документа присутствует один, то он занимает всю свободную ширину окна браузера и ширина блока будет равна 100%. Если поместить один тег <DIV> внутрь другого, то ширина внутреннего тега начинает считаться относительно его родителя. Некоторые браузеры достаточно свободно трактуют понятие ширины, хотя в спецификации CSS четко указано, что ширина складывается из суммы следующих параметров: ширины самого блока (width), отступов (margin), полей (padding) и границ (border).
DIV {
 width: 500px; /* Ширина слоя */
 margin: 10px; /* Значение отступов */
 padding: 20px; /* Поля вокруг текста */
 border: 5px solid black; /* Параметры границы */
 background: #C2DCF3; /* Цвет фона */
}

<div>Пример блока...</div>
В результате данного примера получим слой шириной 570 пикселей. На рис. 1 показано, из чего складывается ширина слоя.

Рис 1. Ширина блочного элемента

Браузер Internet Explorer установит ширину данного слоя равной 500 пикселей, независимо от значений отступов, границ и полей. Получается, что из-за разницы в подходах ширина слоя в браузерах может существенно различаться. Разберем еще один пример связанный с шириной. По умолчанию ширина слоя задается как auto, это позволяет вписывать слой в окно браузера, не принимая в расчет значения установленных полей. Если изменить ширину на 100%, то при добавлении значения отступов, полей или границ неминуемо появится горизонтальная полоса прокрутки. Опять же это правило не для браузера Internet Explorer. Для получения универсального результата, одинаково работающего в разных браузерах и без использования хаков, есть несколько подходов. В следующем примере продемонстрировано создание трех слоев, ширина которых определяется в процентах.
#layer1 {
	width: 100%; /* Ширина первого слоя */
	padding: 10px; /* Цвет фона */
	background-color: #CCCCCC;
}

#layer2 {
	width: 100%; /* Цвет фона */
	background-color: #A8C0E1;
}

#layer2 P {
 padding: 10px; /* Поля вокруг параграфа */
}

#layer3 {
	padding: 10px; /* Поля вокруг текста */
	background-color: #DCAFED;
}

<div id="layer1">Слой 1...</div>
<div id="layer2"><p>Слой 2...</p></div>
<div id="layer3">Слой 3...</div>

Рис. 2. Отображение ширины слоев в браузере Opera

Ширина первого слоя в данном примере (layer1) установлена как 100%, что приводит к отображению горизонтальной полосы прокрутки в браузере Opera и корректной работе в Internet Explorer. Для второго слоя (layer2) ширина также задана 100%, но поля определяются для внутреннего параграфа (тег <P>). За счет этого ширина слоя во всех браузерах будет одинаковой. К третьему слою (layer3) вообще не применяется параметр width, поэтому он определяется по умолчанию — auto. В таком случае слой будет занимать всю ширину окна браузера без всяких горизонтальных полос.

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

Высота
С высотой блочных элементов дело обстоит аналогично ширине. Т.е. браузер Internet Explorer за высоту слоя принимает значение параметра height, а Firefox добавляет к нему еще значение параметров margin, padding и border. Если высота слоя не установлена явно, то она вычисляется автоматически исходя из объема содержимого.

Допустим, для слоя установлена высота в пикселах, а содержимое слоя однозначно превышает указанную высоту. Браузеры и здесь начинают по-своему отображать подобную ситуацию.
#layer1 {
	width: 300px; /* Цвет фона */
	height: 50px; /* Высота слоя */
	padding: 5px; /* Поля вокруг текста */
	background-color: #A9F5A5;
}

<div id="layer1">Высота блока...</div>


Рис. 3. Высота блока в разных браузерах

Видно, что Internet Exporer увеличивает высоту слоя, подстраивая ее под содержимое, а Opera оставляет высоту неизменной, за счет чего текст не помещается в блоке и накладывается поверх слоя.

Цвет фона
Цвет фона элемента проще всего устанавливать через универсальный параметр background. Фоном при этом заливается область, которая определяется значениями атрибутов width, height и padding.

Рис. 4. Область слоя, которая заполняется фоновым цветом

Таким образом, margin не принимает участия в формировании цветной области.

Границы
Из-за разницы в подходах браузеров при формировании блочных элементов наблюдается и различие при отображении границ. Браузер Internet Explorer проводит рамку внутри блока, а Opera — снаружи. Но если использовать фоновую заливку, то увидим совершенно противоположную картину. А все потому, что Opera цвет фона устанавливает по внешнему краю границы, а Internet Explorer — по внутренней.


Рис. 5. Отображение рамки в браузерах

#layer1 {
 width: 300px; /* Ширина слоя */
 padding: 10px; /* Поля вокруг текста */
 background: #F9A2CB; /* Цвет фона */
 border: 5px dashed black;/* Параметры границы */
}

<div id="layer1">Границы слоя</div>

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

Резюме
Блочные элементы выступают в качестве основного строительного материала при верстке веб-страниц. Такие элементы характерны тем, что всегда начинаются с новой строки и занимают всю доступную ширину области, в которой располагаются.

Спецификация CSS определяет, что высота и ширина элемента определяется не только значениями параметров height и width, но к ним еще плюсуется значение полей, отступов и границ. Браузеры в этом плане делятся на две части: одни поддерживают в этом вопросе спецификацию, другие же ее игнорируют и поступают по-своему. Это создает трудности разработчикам, которые желают делать универсальные веб-страницы. Можно только посоветовать ограниченно использовать свойства width и height, поскольку по умолчанию браузер применяет аргумент auto, который заставляет настраивать размеры элемента автоматически.

  Web-разработка, CSS     30 Апреля, Суббота 
 
Ajax CSS JavaScript Google php 1C MSSQL Маркетинг MySQL Web-разработка SEO Virus Заработок Логотипы Фирменный стиль Безопасность SMO Хостинг Аутсорсинг Сотовая связь Домены

 
 
 
© 2006-2016 Веб-студия «Софт-Арт»
Создание сайтов в Ростове
(863) 2-098-456
support@soft-art.ru