У CSS елементи зазвичай розглядаються як прямокутні коробки або смуги. Для опису коробок використовуються наступні – вже добре відомі вам – властивості:
• width – ширина елементу
• height – висота елементу
• left – відстань зліва
• right – відстань справа
• top – відстань зверху
• bottom – відстань знизу
• margin – зовнішній відступ
• border – рамка навколо елементу
• padding – внутрішній відступ, тобто відстань від рамки до вмісту елементу
Ці властивості уже було представлено.
Загальна ширина елементу складається з ширини окремих вказівок. (Те ж саме стосується висоти).
Приклад:
div#box {
width: 100px;
padding: 20px; /* по 20px зліва та праворуч /
border: 2px solid; / по 2px зліва та праворуч /
margin: 0 30px; / по 30px зліва та праворуч */
}Яка ширина у цієї області div? Давайте розглянемо кожне значення окремо:
• 100 пікселів
• 2 рази по 20 пікселів
• 2 рази по 2 пікселів
• 2 рази по 30 пікселів
Це робить загальну ширину елемента 204 пікселя.
Ширину та висоту елементів встановлюють зазначення width і height. Якщо ці вказівки не чітко визначені в таблиці стилів, застосовується наступне:
• Якщо відсутнє width, то коробка відображається такою шириною, як увесь навколишній елемент.
• Якщо відсутня height, то елемент відображається висотою його вмісту.
Приклад:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div#box {
border: 1px solid; /* по 2px зліва та праворуч */
margin: 0 30px; /* по 30px зліва та праворуч */
background-color:#6600CC;
}
</style>
</head>
<body>
<div id="box">PSD-Tutorials.de</div>
</body>
</html>
У браузері це виглядає наступним чином:
Батьківським елементом елемента div є body. Отже, елемент фактично відображається такою шириною, як елемент body. Щодо висоти, він орієнтується на вміст.
Все на Нуль
У кожному браузері є вбудований таблиці стилів. У цих таблицях стилів визначені деякі стандартні значення. Це стосується, наприклад, padding і margin. І ці стандартні значення, на жаль, відрізняються в різних браузерах. Цей аспект ускладнює досягнення ідентичних результатів у відповідних браузерах, зокрема у контексті моделі коробки. Тому рекомендується встановлювати на нуль відступи, які задані в браузерах. Це можна зробити так:
* { padding: 0; margin: 0; }
Додайте цей рядок до початку вашого стилів. Цим чином ви зможете почати розміщувати коробки у потрібних місцях.
Види Коробок
Як кінець-кінцем відображається елемент та як він впливає на інші елементи, залежить від типу елемента. Фактично, специфікація CSS розрізняє між Блочними елементами та Встроєними елементами. (Є ще інші типи, які залишаються за межами на цьому етапі, оскільки вони грають лише допоміжну роль).
Блочні елементи завжди створюють новий рядок. Після них наступні елементи також починаються в новому рядку. Типові блочні елементи, наприклад, p, div, h1, ul тощо. Для цих елементів діють вже згадані властивості Зовнішній відступ, Внутрішній відступ, Висота, Ширина та Рамка.
<h1>Digital Painting & Matte Painting: Bildaufbau definieren</h1> <p>Modul 2 - Teil 2: Ein Bild ist immer ein Ganzes. Jedoch muss man sich immer überlegen, wo der Betrachter als Erstes hinsehen sollte.</p>
Огляд результату в браузері показує, що h1 та p кожен з них створює власний рядок.
Вбудовані елементи, натомість, не створюють свого власного абзацу, а вони відображаються в звичайному текстовому потоці. Типові вбудовані елементи, такі як span, em, strong, img, br та інше, не мають вертикальних зовнішніх відступів та не мають вказівок щодо ширини та висоти.
<h1><em>Digital Painting & Matte Painting</em>: Bildaufbau definieren</h1> <p>Modul 2 - Teil zwei: <strong>Ein Bild ist immer ein Ganzes</strong>. Jedoch muss man sich immer überlegen, wo der Betrachter als Erstes hinsehen sollte.</p>
І ось тут погляд на результат:
Ви можете зробити елементи, які насправді є блоковими, інлайн-елементами тепер.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digital Painting & Matte Painting</h1>
<p>Модуль 2 - Частина 2: <em>Зображення завжди цілісне</em>. Проте завжди потрібно думати, куди перший дивитиметься глядач.</p>
</body>
</html>Перегляньте результат в браузері.
Колір фону заголовка h1 показує, що елемент займає всю ширину. Ширина визначається виходячи з батьківського елемента body.
Тепер додається властивість display.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
display:inline;
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digital Painting & Matte Painting</h1>
<p>Модуль 2 - Частина 2: <em>Зображення завжди цілісне</em>. Проте завжди потрібно думати, куди перший дивитиметься глядач.</p>
</body>
</html>
Властивість display: inline змінює ширину елемента.
Фактично тепер ширина елементу відповідає вмісту. Тут огляд того, які значення можна призначити властивості display:
• none – не показувати
• block – елемент показується як блок, тобто створює новий рядок.
• inline – елемент показується як інлайн-елемент, тобто у текстовому потоці.
• inline-block – зовнішньо вирівнюється як блок, де можна вказати висоту, ширину та зовнішній відступ. Кожен елемент залишається в текстовому потоці. Це поєднання блокового та інлайнового елемента.
• list-item – елемент відображається як блок, причому йому додається маркер списку.
• run-in – залежно від вмісту елемент може бути блоковим або інлайн-елементом.
• table – працює як відомий у HTML елемент table.
• inline-table – працює як елемент table в HTML, але інлайн.
• table-row – елемент містить дочірні елементи, які розташовані поруч. Діє, як елемент рядка tr в HTML.
• table-cell – елемент відповідає за комірку таблиці, працює як елементи th і td в HTML.
• table-row-group – елемент містить групу елементів з дочірніми елементами, розташованими поруч і працює, як елемент tbody в HTML.
• table-header-group – елемент містить групу елементів з дочірніми елементами, розташованими поруч і працює, як елемент thead в HTML.
• table-footer-group – елемент містить групу елементів з дочірніми елементами, розташованими поруч і працює, як елемент tfoot в HTML.
• table-column – цим описуються властивості клітинки стовпця. table-column працює як елемент col в HTML.
• table-column-group – цей елемент містить групу елементів, за якими описуються властивості клітинки стовпця. Це працює як елемент colgroup в HTML.
• table-caption – це визначення заголовка таблиці. Властивість працює як елемент caption в HTML.
Дійсно, CSS надає різноманітні опції відображення для різних типів елементів. Це важливо для позиціонування елементів. Більше про це в наступних підручниках.
