Веб-компас сайтостроителей
www.linedmk.com
Войти Регистрация
HTML CSS JavaScript PHP Разное
Основы CSS
/ Все статьи / CSS / Основы CSS / Блочная модель документа. Часть 1

Блочная модель документа. Часть 1

В каскадных таблицах стилей (CSS) элементы HTML-документа представляют собой прямоугольные блоки, об их отображении на веб-странице мы и поговорим в этой статье.
Давайте для начала познакомимся со структурой блока. Каждый блок состоит из содержимого элемента, отступа между содержимым и границей блока, самой границы блока, а также поля (расстояние от границы блока до другого элемента) блока. Для пояснения приведу рисунок

 

модель блока

 

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

 

Свойства полей

 

Свойства margin-top, margin-right, margin-bottom, margin-left задают ширину соответственно верхнего, правого, нижнего и левого полей блока. Задаваться поля могут любыми абсолютными величинами, поддерживаемыми CSS, например пикселями, в процентных значениях от родительского блока, а также можно использовать ключевое слово auto (о нем поговорим попозже). Например

Код
div { margin-top:10px; margin-left: auto; margin-right: auto; margin-bottom:15px; }

Но можно использовать сокращенную запись, используя свойство margin, указав нужные значения полей. Можно задать сразу все поля блока, причем равные по величине, записав следующее
Код
margin:10px;
Если передать свойству margin два значения, то первое значение будет определять величины верхнего и нижнего полей, а второе - величины левого и правого полей. Например
Код
margin: 10px 20px;

Если передать свойству margin три значения, то первое значение будет определять величину верхнего поля, второе будет определять величины левого и правого полей, а третье значение будет определять величину нижнего поля блока. Например
Код
margin:10px 20px 10px;

Если же указать в свойстве margin четыре значения, то они будут определять величины соответственно верхнего, правого, нижнего и левого полей блока. Например
Код
margin:10px 20px 10px 20px;

Для большего понимания данных вещей давайте рассмотрим следующий пример - создадим два блока с разными цветами фона.
Код
<html>

	<head>

	<title> Блочная модель документа</title>

	<style>

	div.b1 { background: #C0C0C0; }

	div.b2 { background: #00FF80; }

	</style>

	</head>

	<body>

	

	<div class="b1">

	Содержимое блока DIV.b1

	</div>

	<div class="b2">

	Содержимое блока DIV.b2

	</div>

	

	</body>

	</html>

При просмотре в браузере должна эта страничка отобразиться следующим образом.

 

Блочная модель документа

 

Давайте блоку div.b1 добавим свойства margin-top и margin-bottom.

Код
<html>

	<head>

	<title> Блочная модель документа</title>

	<style>

	div.b1 { background: #C0C0C0; margin-top:10px; margin-bottom:10px; }

	div.b2 { background: #00FF80; }

	</style>

	</head>

	<body>

	

	<div class="b1">

	Содержимое блока DIV.b1

	</div>

	<div class="b2">

	Содержимое блока DIV.b2

	</div>

	

	</body>

	</html>

При просмотре в браузере должно отобразиться следующим образом

 

Блочная модель документа

 

Поля блока всегда прозрачны, то есть свойством background невозможно задать цвет или рисунок для фона полей.
Поэкспериментируйте со свойством margin - задайте свойства margin-left и margin-right, а также поменяйте величины полей.
Теперь давайте разберемся, что за загадочное значение такое auto. Тут нужно предупредить, что IE не понимает данное значение, его корректно обрабатывают браузеры Opera и Firefox. Значение auto можно использовать для выравнивания блоков на веб-странице. Например, нам нужно, чтобы блок div был посередине страницы. Для этого нужно написать

Код
<html>

	<head>

	<title> Блочная модель документа</title>

	<style>

	div { background: #C0C0C0; margin-left: auto; margin-right: auto; height:50px; width:60%; }

	</style>

	</head>

	<body>

	

	<div>

	Содержимое блока DIV

	</div>

	

	</body>

При просмотре данной страницы в браузерах Opera и Firefox блок div будет находиться посередине, а в браузере IE нет. Чтобы и в IE страница также отображалась, как и в браузерах Opera и Firefox нужно добавить стилевое свойство
Код
body { text-align: center; }

 

Свойства отступа

 

Свойства padding-top, padding-right, padding-bottom, padding-left задают ширину соответственно верхнего, правого, нижнего и левого отступов блока. Задаваться поля могут либо любыми абсолютными величинами, поддерживаемыми CSS, например пикселями, либо в процентных значениях от родительского блока. Например

Код
p { padding-top:10px; padding-right:15px; padding-bottom:20px; padding-left:10px; }

Существует сокращенная запись задания отступов. Для этого используется свойство padding. Если свойству padding передать одно значение, то оно будет определять сразу все четыре отступа, например
Код
div { padding:10px; }

Если свойству padding передать два значения, то первое значение будет применяться к верхнему и нижнему частям отступа, второе будет применяться к левому и правому частям отступа блока. Например
Код
p { padding:10px 15px; }

Если свойство padding принимает три значения, то первое значение будет определять верхний отступ, второй будет определять левый и правый отступы, и третье значение будет определять нижний отступ блока. Например
Код
div { padding: 20px 15px 10px; }

Если свойство padding принимает четыре значения, то оно будут определять соответственно верхний, правый, нижний и левый отступы блока. Например
Код
div { padding: 20px 15px 10px 5px; }

Для иллюстрации свойства padding посмотрите в браузере страничку со следующим кодом
Код
<html>

	<head>

	<title> Блочная модель документа</title>

	<style>

	div.b1 { background: #C0C0C0; padding:10px;}

	div.b2 { background: #00FF80; }

	</style>

	</head>

	<body>

	

	<div class="b1">

	Содержимое блока DIV.b1

	</div>

	<div class="b2">

	Содержимое блока DIV.b2

	</div>

	

	</body>

	</html>

Продолжим разговор про стилевые свойства блока в следующей статье.

Еще статьи из данной категории
Предыдущие статьи
Следующие статьи
Комментарии к публикации
Всего комментариев: 6
прохожий: Foxy | 09.07.2010, 06:29 #
А любую табличную верстку можно переделать в блочную?
Ответить
Автор статьи: admin | 10.07.2010, 07:29 #
Нет, не любую.
Ответить
прохожий: Дмитрий | 08.09.2010, 06:45 #
Скажите пожалуйста, почему в этом примере первый блок (со свойством padding) увеличивается примерно на 20px?

<title>Документ без названия</title>
</head>

<body style="margin:2px 2px">

<div style="padding:10px; width:300px; height:300px; background-color:#06C; margin-top:10px">
<div style="width:280px; height:280px; background-color:#0F6;">
</div>
</div>

</body>
</html>
Ответить
Автор статьи: admin | 09.09.2010, 20:26 #
Почему? Это не у меня надо спрашивать, а у тех кто придумывал всю эту верстку. А что бы нормально отображалось, надо использовать дополнительные блоки:


<title>Документ без названия</title>
</head>

<body style="margin:2px 2px">

<div style=" width:300px; height:300px; background-color:#06C; margin-top:10px">
<div style="padding:10px;">
<div style="width:280px; height:280px; background-color:#0F6;">
</div>
</div>
</div>

</body>
</html>
Ответить
прохожий: Дмитрий | 10.09.2010, 00:14 #
Спасибо, ясно.
Ответить
прохожий: sympler | 18.09.2010, 08:15 #
отлично все расписано, как всегда с примерами!
думаю с этой статьи и нужно начинать изучение css
Ответить
Добавить комментарий
Новости сайта
Последние публикации в каталоге статей
Партнеры сайта
Современный бесплатный скрипт интернет-магазина на CMS boxcode.ru.
Доска бесплатных объявлений Краснодара и каталог фирм, магазинов, компаний и организаций Краснодарского края.
© web2-site.ru - Веб-компас сайтостроителей
Наш сайт переехал с сайта www.linedmk.com на web2-site.ru
Работает на
CMS boxcode.ru