CSS / Блокова Модель

Типи елементів (властивість display) [ правити ] Властивість display визначає поведінку елемента...
Висота (height) і ширина (width) елемента [ правити ]
Внутрішні (padding) і зовнішні (margin) відступи [ правити ]
Межі (border / outline) елемента [ правити ]
Скорочена запис властивостей [ правити ]
Властивість box-sizing [ правити ]

Типи елементів (властивість display) [ правити ]
Властивість display визначає поведінку елемента в документі.
Наприклад, за допомогою цієї властивості рядковий елемент можна визначити як блоковий або навпаки.
значення:
block - блоковий елемент (значення за замовчуванням в CSS1) (CSS1)
inline - рядковий елемент (значення за замовчуванням в CSS2 / CSS2.1 і вище) (CSS1)
list-item - блоковий елемент з маркером списку (CSS1)
none - об'єкт був видалений з потоку документа без збереження місця (CSS1)
inline-block - блоковий елемент з поведінкою, аналогічним строчному (CSS2.1)
table - блокова таблиця (table) (CSS2)
inline-table - рядкова таблиця (table) (CSS2)
table-row - рядок таблиці (tr) (CSS2)
table-cell - осередок таблиці (td, th) (CSS2)
table-caption - заголовок таблиці (caption) (CSS2)
table-column - колонка таблиці (col) (CSS2)
table-column-group - група колонок (colgroup) (CSS2)
table-header-group - верхня частина таблиці (шапка) (thead) (CSS2)
table-row-group - тіло таблиці (tbody) (CSS2)
table-footer-group - нижня частина таблиці (підвал) (tfoot) (CSS2)
У дужках для табличних значень цієї властивості вказані html-елементи з аналогічним поведінкою.
Поруч з кожним значенням вказана версія CSS, коли воно з'явилося вперше.

Блокова модель (Box model) [ правити ]

Це одна з основ в розумінні CSS, модель форматування документа. Визначає формування розмірів елементів на сторінці, їх взаємодія між собою.

content - вміст блоку, інформація;
padding - внутрішній відступ;
border і outline - межа і зовнішня межа; (Друга властивість не бере участі в формуванні розмірів блоку)
margin - зовнішній відступ;
height і width - висота і ширина елемента.

В IE4 і IE5 висота і ширина блоку формуються з урахуванням padding і border.

В IE6 в режимі сумісності (quirks mode) також.

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

На наступному малюнку порівнюються блокові моделі W3C і IE4 / IE5:

В CSS3 з'явилася властивість box-sizing для підтримки блокової моделі IE4 / IE5.

У наступних розділах буде більш докладний опис властивостей з прикладами.

Висота (height) і ширина (width) елемента [ правити ]

height - висота;
min-height - мінімальна висота;
max-height - максимальна висота;
width - ширина;
min-width - мінімальна ширина;
max-width - максимальна ширина.

Ці властивості можуть задаватися в різних одиницях CSS .

Для мінімальних і максимальних величин значення за замовчуванням none, тобто без обмежень, а для звичайних величин - auto, тобто розраховується автоматично. Негативні значення для всіх цих властивостей заборонені.

приклад:

body {width: 960 px; } P {max-width: 60%; }

У цьому прикладі ширина сайту 960px, а максимальна ширина абзацу не більш 60% ширини сайту.

Внутрішні (padding) і зовнішні (margin) відступи [ правити ]

Властивість padding визначає відстань від вмісту блоку до його межі, а margin - відстань між кордонами сусідніх елементів.

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

padding / margin-top - верхній відступ (внутрішній / зовнішній)
padding / margin-right - правий відступ (внутрішній / зовнішній)
padding / margin-bottom - нижній відступ (внутрішній / зовнішній)
padding / margin-left - лівий відступ (внутрішній / зовнішній)
padding / margin - відступ (внутрішній / зовнішній) (скорочена форма)

Межі (border / outline) елемента [ правити ]

Межі дозволяють візуально відокремити один елемент від іншого.

Властивість border-color дозволяє задати колір кордону, border-style - її стиль і border-width - товщину.

Можна задати всі ці три властивості в скороченою формі, перерахувавши їх через пробіл у властивості border.

Або вказати для кожної зі сторін (border-top, border-right, border-bottom, border-left) необхідні властивості окремо.

Властивість outline дозволяє задавати колір (outline-color), стиль (outline-style) і товщину (outline-width) зовнішнього кордону тільки для всіх сторін одночасно. І це властивість не бере участь у формуванні розмірів блоку.

У скороченою формі властивості зовнішнього кордону записуються через пробіл у властивості outline.

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

значення:

none (CSS1)
hidden (CSS2 / CSS2.1)
dotted (CSS1)
dashed (CSS1)
solid (CSS1)
double (CSS1)
groove (CSS1)
ridge (CSS1)
inset (CSS1)
outset (CSS1)

Значення цієї властивості вказуються або за допомогою невід'ємних значень , Або за допомогою ключових слів thin, medium, thick (третє значення більше).

border-top
border-right
border-bottom
border-left
border-top-color / style / width
border-right-color / style / width
border-bottom-color / style / width
border-left-color / style / width
outline
outline-color
outline-style
outline-width

Значення для останніх чотирьох властивостей аналогічні значенням для border, крім властивості outline-style, яке не підтримує значення hidden.

Скорочена запис властивостей [ правити ]

Для скорочених властивостей padding, margin, border-color / style / width використовується мнемонічне правило TRouBLe від англійських назв сторін (top / right / bottom / left, тобто верх / право / низ / ліво).

наприклад:

p {padding: 2 px 4 px 6 px 8 px; padding: 2 px 4 px 6 px; padding: 2 px 4 px; padding: 2 px; }

У цьому прикладі значення властивості визначають сторони наступним чином:

4 значення: T + R + B + L;

3 значення: T + RL + B;

2 значення: TB + RL;

1 значення: TRBL.

Для скорочених властивостей (border, border-top / right / bottom / left, outline) їх значення записуються через пробіл.

Для інших властивостей дивіться скорочені властивості .

Властивість box-sizing [ правити ]

Це властивість вперше з'явилося в CSS3.

Воно дозволяє перемикатися з блочною моделі W3C на блокову модель IE4 / IE5.