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

Категорії статей: CSS ; 16.04.2010

У каскадних таблицях стилів (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>

Аби в IE сторінка відображувалася, так само як Opera і Firefox(тобто блок DIV посередині сторінки) потрібно додати стильову властивість

Код
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>

Продовжимо розмову про стильові властивості блоків в наступній статті .

По зовнішнім джерелам

Залишити коментар

Перепечатка любых материалов © 2013 без разрешения автора запрещена. | 2.44MB | 0.04Sec ad Google