Головна CSS Блочна модель (Box Model) - основа CSS
Блочна модель (Box Model) - основа CSS

Як відомо, будь-який HTML / XHTML-документ складається з елементів (тегів), що утворюють певну ієрархію. Веб-майстер використовує CSS, щоб примусити браузер певним чином оформити і відобразити вміст елементів, перетворивши його в красиво оформлений документ.

Практично будь-який елемент браузер сприймає як прямокутну область, так, як показано у прикладі нижче. Це поведінка браузера має назву Box Model ("блокова" або "коробкова" модель).

Припустимо, ми маємо на вході:

<span>Якийсь контент</span>


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

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

Прямокутна область, яка містить елемент, складається з чотирьох частин. Це:
• Власне, вміст елементу (контент)
• Бордюр (рамка, англ. "Border")
• Простір між вмістом елементу і бордюром (англ. "padding").
• Зовнішнє простір між бордюром і невидимою границею прямокутника (англ. "margin").

Існує два типи елементів - блокові ("block") і внутрішньотекстові ("inline", можна називати як "вбудовані").

Блокові (block) елементи
Займають до 100% ширини батьківського елементу. При цьому сусіднім елементів доведеться посунутися вниз. Так, наприклад, h1 є блоковим елементом - всякий наступний за ним елемент буде відображений нижче.

Inline-("інлайн" -) елементи
Мають ширину як у свого вмісту. Це означає, що два і більше inline-елементу можуть розташовуватися послідовно на одній лінії. Наприклад, тег a - це inline-елемент. Він може перебувати прямо в тексті, оточений текстом з двох сторін.

Будь-який веб-браузер містить деякий базовий вбудований набір правил, і знає, який XHTML-елемент відноситься до типу "block", а який - до "inline". Згідно з цими правилами браузер малює h1 заголовки шрифтом, вдвічі перевищує розмір звичайного шрифту, а гіперпосилання за замовчуванням відображаються синіми з підкресленням.

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

 

 
© 2008-2013 PHPist