Модель контейнерів в CSS

Три найбільш важливі концепції CSS - плаваючі елементи, позиціонування і модель контейнерів. Ці концепції управляють розміщенням і виведенням елементів на сторінці і є фундаментом верстки сторінки на основі таблиць CSS. Якщо ви звикли керувати структурою сторінки за допомогою таблиць, ці концепції спочатку здадуться вам досить дивними. Більшість дизайнерів розробляють сайти на основі таблиць CSS, не розуміючи повною мірою всіх тонкощів моделі контейнерів, не бачачи відмінностей між абсолютним і відносним позиціонуванням і не використовуючи багатьох можливостей, що надаються плаваючими елементами. Коли ви гарно засвоїте ці три концепції, верстати сторінки на основі CSS вам буде набагато легше.

Модель контейнерів

Модель контейнерів (bох model) - один з наріжних каменів CSS. Управляє розміщенням і виведенням елементів на сторінці, а також в деякій мірі взаємодією елементів один з одним. У моделі контейнерів кожен елемент сторінки розглядається як прямокутний контейнер (bох), що складається з вмісту, внутрішньої порожній смуги, рамки і зовнішньої порожній смуги.

Внутрішня смуга (padding) відокремлює область вмісту. Якщо до елементу додати фон, він буде застосований до області вмісту і до внутрішньої смуги. Завдяки цьому внутрішня смуга часто використовується для віддалення кромки вмісту від кромки фону. Якщо в елемент додати рамку, навколо внутрішньої смуги буде виведена лінія. Лінії рамки можна привласнити будь-який стиль, зробивши її суцільною, штриховою, пунктирною і т.д. За межами рамки розташована зовнішня порожня смуга (margin). Зовнішні смуги прозорі, відвідувач не бачить їх. Зазвичай зовнішні смуги застосовуються для створення проміжків між елементами сторінки.
<style type="text/css">
#myblock {
width: 300px;
padding: 50px;
border: 10px solid red;
margin: 10px;
background: yellow;
}
</style>
<div id="myblock">Область вмісту</div>


Внутрішні смуги, рамки і зовнішні смуги не обов'язкові. За замовчуванням їх значення дорівнює 0. Однак необхідно враховувати, що деякі браузери на основі своїх таблиць стилів за замовчуванням присвоюють зовнішні і внутрішні смуги багатьом елементам сторінки. Ви можете перевизначити стилі браузерів, явно присвоївши властивостям margin і padding значення 0. Це можна зробити як для окремих елементів, так і для всіх елементів сторінки за допомогою універсального селектора.
*{ margin: 0; padding: 0 }

У правилах CSS властивості width і height визначають ширину і висоту області вмісту. Додавання внутрішньої смуги, рамки і зовнішньої смуги не впливає на розміри області вмісту, але збільшує загальний розмір контейнера. Наприклад, якщо ширина контейнера повинна бути рівна 100 пікселям, а ширина зовнішньої і внутрішньої смужок - 10 і 5 пікселів відповідно, ширину вмісту потрібно задати рівну 70 пікселям.

#box{ margin: 10px; padding: 5рх; width: 70рх }

Внутрішню смугу, рамку і зовнішню смугу можна застосувати до всіх або тільки до заданих сторін контейнера. Ширина зовнішньої смуги може мати негативне значення, досить часто воно використовується для нашарування елементів один на одного.

Злиття зовнішніх смужок

Концепція злиття зовнішніх смужок порівняно нескладна, однак на практиці при верстці Web-сторінок вона часто призводить до плутанини. Суть концепції така: коли дві або більше вертикальних зовнішніх смужок стикаються, вони зливаються, утворюючи одну смугу. Ширина результуючої смуги дорівнює ширині більшої з вихідних смужок.

Коли два елементи розташовані один під іншим, нижня зовнішня смуга верхнього елементу зливається з верхньої зовнішньої смугою нижнього елемента.

А ось практичний приклад:
<style type="text/css">
#bloc1{ width: 300px; height: 200px; margin-bottom: 30px; border: 5px solid red }
#bloc2{ width: 300px; height: 200px; margin-top: 40px; border: 5px solid green }
<div id="bloc1"></div>
<div id="bloc2"></div>

Проміжок між блоками, здавалося б, повинен бути 70 пікселів, адже верхній блок має 30 пікселів відступу внизу, а нижній 40 пікселів вгорі, але проміжок буде дорівнює 70 пікселів - параметр більшої сторони.

Коли один елемент знаходиться в іншому елементі, а рамок або внутрішніх смужок, які поділяють зовнішні смуги, немає, верхні і нижні зовнішні смуги зливаються.

На перший погляд це може здатися дивним, але зливатися один з одним можуть навіть зовнішні смуги одного і того ж елемента. Припустимо, порожній елемент має зовнішні смуги, але не має ні рамки, ні внутрішніх смужок. Тоді верхня зовнішня смуга доторкнеться до нижньої і вони зіллються.

Якщо отримана таким чином зовнішня смуга торкається до зовнішньої смуги наступного елемента, вони теж зливаються.

З цієї причини кілька порожніх елементів абзацу, розташовані один після іншого, займають дуже мало місця. Їх зовнішні смуги зливаються, утворюючи одну невелику смугу.

Злиття зовнішніх смуг - вельми корисний засіб, який найяскравіше застосовується в текстових абзацах. Ширина простору над першим абзацом дорівнює ширині верхньої зовнішньої смуги елемента абзацу. Якби зовнішні смуги не зливалися, проміжки між усіма наступними абзацами мали б ширину, що дорівнює сумі ширини верхніх і нижніх зовнішніх смужок. Це означає, що між абзацами проміжки були б в два рази більші, ніж між верхньою кромкою сторінки (або попереднім елементом, наприклад зображенням) і першим абзацом. Коли ж зовнішні смуги зливаються, проміжки між абзацами скрізь однакові.

Злиття по замовчуванні виконується тільки для вертикальних зовнішніх смуг блокових контейнерів в нормальному потоці документа. Зовнішні смуги рядкових, плаваючих і абсолютно позиціонуючих контейнерів ніколи не зливаються.
Залишати коментар дозволено лише зареєстрованим користувачам. Процедура займе зовсім небагато часу, і ви зможете швидко добавити відгук.

Авторизуватися

Вперше на KovelPost? Приєднуйтесь

KovelX - безкоштовні оголошення

Photo KovelX
Photo KovelX
350 грн.
Photo KovelX
Photo KovelX
Договірна
Photo KovelX
Договірна
Photo KovelX
Photo KovelX
25 грн.
Photo KovelX
45 грн.
Photo KovelX
Договірна
Photo KovelX
Договірна
Photo KovelX
130 грн.
Photo KovelX
250 грн.
Photo KovelX
200 грн.
Photo KovelX
250 грн.
Photo KovelX
200 грн.

Читайте нас також: