Модель візуального форматування CSS

Такі елементи, як "р", "h1" або "div", називаються блоковими (або елементами блочного рівня). Це означає, що візуально ці елементи виводяться як блоки вмісту або блокові контейнери. У той же час такі елементи, як "strong" або "span", називаються рядковими, оскільки їх вміст виводиться в рядках як в рядкових контейнерах.

За допомогою властивості "display" можна змінити тип генерованого контейнера. Щоб змусити рядковий елемент вести себе як блоковий, потрібно привласнити його властивості "display" значення "block". Якщо властивості "display" привласнити значення "none", елемент не генеруватиме контейнер взагалі. У цьому випадку ні контейнер, ні його вміст виводитися не будуть і елемент не займе місця в документі.

У таблицях CSS існує три базові схеми позиціонування: нормальний потік, плаваючий блок і абсолютне позиціонування. Якщо явно не вказано інше, життєвий цикл кожного контейнера починається з позиціонування в нормальному потоці. Позиція контейнера в нормальному потоці визначається позицією елемента в коді (X)HTML.

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

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

Як і елементи (X)HTML, контейнери можуть бути вкладеними один в іншого. Більшість контейнерів представляють собою елементи, явно визначені в коді (X)HTML. Однак існує одна ситуація, в якій блоковий елемент створюється навіть якщо він не визначений явно в коді. Це відбувається, якщо додати деякий текст в самий початок блочного елемента, наприклад "div". Тоді текст буде інтерпретуватися як абзац (тобто блоковий елемент), незважаючи навіть на те, що він не знаходиться в елементі абзацу "р".
<div>
текст
<р>ще текст</p>
</div>

У цій ситуації контейнер називається анонімним блоковим контейнером, оскільки він не асоційований ні з одним явно визначеним елементом.

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

Відносне позиціонування CSS

Концепція відносного позиціонування досить проста. При такому позиціонуванні елемент спочатку розміщується там, де був до цього, тобто в нормальному потоці документа. Потім його можна змістити щодо початкового положення в потоці, задавши горизонтальну і вертикальну позиції. Якщо позиції зверху (top) присвоїти значення 20рх, контейнер буде зміщений на 20 пікселів вниз щодо початкового положення в потоці. Якщо ж привласнити значення 20рх ще і позиції ліворуч, то елемент буде зміщений на 20 пікселів праворуч, а ліворуч від нього буде створено порожній простір шириною 20 пікселів.
#myblock{ position: relative; left: 20рх; top: 20рх }


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

Абсолютне позиціонування CSS

Відносне позиціонування фактично інтерпретується як частина моделі нормального потоку, тобто елемент позиціонується щодо його позиції в нормальному потоці. На противагу цьому, процедура абсолютного позиціонування витягує елемент з потоку документа. Отже, елемент при цьому не займає простір. Інші елементи нормального потоку поводяться так, ніби абсолютно позиціонованого елемента не існує.

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

Залежно від пристрою користувача, вихідним блоком може бути або сторінка, або елемент HTML.

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

Оскільки при абсолютному позиціонуванні контейнер витягується з потоку документа, він може нашаровуватися на інші елементи сторінки. Управляти послідовністю нашарування контейнерів можна за допомогою властивості "z-index". Чим більше значення "z-index", тим вищий пріоритет виведення контейнера на екран.

Абсолютне позиціонування щодо найближчого позиціонованого батьківського елементу дозволяє створювати досить цікаві ефекти. Наприклад, можна вирівняти абзац тексту по правому нижньому краю великого контейнера. Для цього достатньо присвоїти контейнеру відносну позицію, а потім абсолютно позиціонувати абзац щодо нього.
<style type="text/css">
#branding{ width: 400px; height: 100px; position: relative; border: 5px solid red }
#branding .tel{ position: absolute; right: 10px; bottom: 10px; border: 3px solid green }
</style>
<body>
<div id="branding">
<div class="tel">Телефон: 050 432-64-22</div>
</div>
</body>

Результат:

Абсолютне позиціонування - корисний інструмент верстки сторінки, особливо при використанні щодо позиційованих батьківських контейнерів. В принципі сторінку можна зверстати виключно за допомогою абсолютного позиціонування. Однак для цього всі елементи повинні мати фіксовані розміри, щоб їх можна було позиціонувати без ризику нашарування.

Оскільки при абсолютному позиціонуванні елемент витягується з потоку документа, він ніяк не впливає на контейнери нормального потоку. При збільшенні абсолютно позиціонованого контейнера (наприклад, шляхом зміни розміру шрифту) навколишні контейнери не переміщаються. Отже, будь-яка зміна розмірів може зруйнувати насилу налаштовану структуру сторінки.

Фіксоване позиціонування CSS

Фіксоване позиціонування (fixed) - це різновид абсолютного позиціонування. Різниця між ними полягає в тому, що блок, який містить зафіксований елемент, повинен бути видовим екраном (viеwрогt). Це дозволяє створювати плаваючі елементи, завжди розташовані в одному і тому ж місці екрана. Даний елемент буде зафіксований, і назавжди залишається в одному і тому ж місці екрану під час прокрутки сторінки відвідувачем. Це в особливих випадках дуже полегшує користування сайтом.
<style type="text/css">
#tel{ position: fixed; right: 10px; top: 10px }
</style>
<body>
<div id="tel">Телефон: 050 432-64-22</div>
</body>

При виконанні даного коду телефон завжди буде знаходиться у верхньому правому куті, незалежно від кількості інформації.

Плаваючі елементи CSS

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

Якщо зробити блок 1 плаваючим і пристикувати його до правого краю контейнера, він буде вилучений з потоку і переміщений вправо таким чином, що його права кромка торкнеться правої кромки контейнера.
<style type="text/css">
.bloc1{ float: right; width: 100px; height: 50px }
.bloc2{ width: 100px; height: 50px }
.bloc3{ width: 100px; height: 50px }
</style>
<body>
<div class="bloc1">block1</div>
<div class="bloc2">block2</div>
<div class="bloc3">block3</div>
</body>


Коли блок 1 пристикований вліво, він видалений з потоку документа і його лівий край торкається лівого краю контейнера. Оскільки він не в потоці, він не займає простору, в результаті чого блок 2, який опинився під ним, невидимий. Якщо всі три блоку зробити плаваючими і пристикувати вліво, кожен з них торкатиметься попереднього (крім блоку 1, який торкатиметься лівого краю контейнера).
<style type="text/css">
.bloc1{ width: 100px; height: 50px; float: left }
.bloc2{ width: 100px; height: 50px; float: left }
.bloc3{ width: 100px; height: 50px; float: left }
</style>
<body>
<div class="bloc1">block1</div>
<div class="bloc2">block2</div>
<div class="bloc3">block3<div>
</body>


Якщо контейнер занадто вузький для всіх плаваючих елементів і вони не можуть вміститися в ньому по горизонталі, ті, що не помістилися плаваючі блоки будуть перенесені вниз. Якщо плаваючі елементи мають різну висоту, елемент наступного рядка може торкатися не до контейнеру, а до плаваючого блоку попереднього рядка.
<style type="text/css">
.bloc1{ width: 100px; height: 70px; float: left }
.bloc2{ width: 100px; height: 50px; float: left }
.bloc3{ width: 100px; height: 50px; float: left }
</style>
<body>
<div class="bloc1">block1</div>
<div class="bloc2">block2</div>
<div class="bloc3">block3<div>
</body>

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

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

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

Статистика: