Лекція 6. Блочна модель документа

 

1.     Блочні елементи

Елементи HTML сторінки зазвичай діляться на блочні і рядкові.

Блочні елементи можна представити як прямокутні області на сторінці. Вони мають такі особливості:

1.                   До і після блочного елемента відбувається перехід рядка.

2.                   Блочним елементам можна задавати ширину, висоту, внутрішні і зовнішні відступи.

3.                   Займають весь доступний простір по горизонталі.

До блочних елементів відносяться такі теги як: <p>, <h1>, <h2>, <ul> і так далі.

Ще один важливий блочний тег   - Це тег <div>, який означує просто «блок» або «прямокутний контейнер». Цей тег найчастіше використовується для створення сіток.

Існують і більш складні типи елементів, їм буде присвячена друга частина курсу.

 

2.     Рядкові елементи

Рядкові елементи розташовуються один за одним в одному рядку, при необхідності рядок переноситься. Особливості рядкових елементів:

1.                   До і після рядкового елемента відсутні переноси рядка.

2.                   Ширина і висота рядкового елемента залежить тільки від його змісту, задати розміри можна за допомогою CSS.

3.                   Можна задавати тільки горизонтальні відступи.

До рядковим елементів відносяться такі теги як: <a>, <strong>, <em>, <span> і так далі.

Рядкові елементи призначені для оформлення тексту на рівні невеликих фраз і окремих слів. Блокові ж елементи призначені для розмітки великих блоків тексту (заголовки, абзаци, списки) і створення сітки.

3.     Ширина і висота

Ширина і висота елементів задаються за допомогою властивостей width і height відповідно.

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

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

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

Задати ширину та висоту блоку можна, наприклад, так:

.selector {

width: 100px;

height: 100px;

}

Повернути значення за замовчуванням можна за допомогою спеціального значення auto:

.selector {

width: auto;

height: auto;

}

 

4.     Внутрішні відступи, властивість padding

Властивість padding задає внутрішні відступи елемента   - Відступи від зовнішньої межі елементу до його вмісту. Ці відступи ще іноді називають полями.

Існує кілька способів запису властивості padding.

padding: 10px;

padding: 5px 10px;

padding: 5px 10px 15px;

padding: 5px 10px 15px 20px;

1.                   Однакові відступи з усіх боків.

2.                   Відступи зверху і знизу 5px, праворуч і ліворуч 10px.

3.                   Відступ зверху 5px, ліворуч і праворуч 10px, знизу 15px.

4.                   Різні відступи з усіх боків, в порядку верхній, правий, нижній та лівий.

Також можна задавати відступи для різних сторін за допомогою властивостей padding-left, padding-right, padding-top, padding-bottom.

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

Внутрішні відступи створюються прозорими.

5.     Зовнішні відступи, властивість margin

Властивість margin задає зовнішні відступи елемента - Відступи від зовнішньої межі елемента до границь батьківського елементу або до сусідніх елементів.

Способи запису властивості margin аналогічні властивості padding.

margin: 10px;

margin: 5px 10px;

margin: 5px 10px 15px;

margin: 5px 10px 15px 20px;

1.                   Однакові відступи з усіх боків.

2.                   Зверху і знизу 5px, праворуч і ліворуч 10px.

3.                   Зверху 5px, ліворуч і праворуч 10px, знизу 15px.

4.                   Верхній, правий, нижній та лівий відступи відповідно.

Можна задавати відступи для різних сторін за допомогою властивостей margin-left, margin-right, margin-top, margin-bottom.

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

6.     Рамки

Рамка задається за допомогою властивості border, яка складається з трьох компонентів:

1.                   ширина рамки;

2.                   стиль рамки;

3.                   колір.

Наприклад:

selector {

border: 5px solid red;

}

Цей стиль задає червону суцільну рамку товщиною 5px.

Задавати рамку можна однією властивістю border, а можна і за допомогою окремих властивостей border-width, border-style, border-color. Наприклад:

selector {

border-width: 5px;

border-style: solid;

border-color: red;

}

Цей стиль задає таку ж рамку, як і у прикладі вище.

Кілька найпоширеніших стилів рамок:

·   solid   - Суцільна;

·   dashed   - Пунктирна;

·   dotted   - Точками.

Рамку можна задавати і рядковим, і блочним елементам.

7.     Стандартна блокова модель

Стандартна блочна модель відповідає на основні питання:

Скільки ж у підсумку місця буде займати елемент?

Відповідь наступна:

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

Для рядкових елементів є свої особливості, які ми опишемо пізніше.

Схема блокової моделі:

Блокова модель

·   ширина / висота вмісту   - Властивості width і height (синій прямокутник на схемі);

·   внутрішні відступи   - Властивість padding;

·   рамки   - Властивість border;

·   зовнішні відступи   - Властивість margin.

8.     «Суміщення» зовнішніх відступів

Вертикальний відступ між двома сусідніми елементами дорівнює максимальному відступу між ними. Якщо відступ одного елемента дорівнює 20px, а другий 40px, то відступ між ними буде 40px.

Цей ефект називається ефектом «суміщенням» зовнішніх відступів.

Горизонтальні відступи між елементами просто складаються. Наприклад, горизонтальний відступ між двома елементами з відступами 30px буде дорівнює 60px.

9.     «Випадання» зовнішніх відступів

«Випадання»   - Це ще один ефект, пов'язаний з вертикальними зовнішніми відступами. Якщо всередині батьківського блоку розташувати блок і поставити йому відступ зверху, то внутрішній блок притулиться до верхнього краю батьківського, а у батьківського елементу з'явиться відступ зверху. Тобто верхній відступ внутрішнього елемента «випадає» з батьківського елементу.

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

Щоб позбавитися від ефекту випадання, можна задати батьківського елементу внутрішній відступ (padding) зверху або рамку також зверху.

Зовнішні і внутрішні відступи завжди складаються.

10.                       Як відцентрувати елемент?

Щоб відцентрувати блочний елемент, потрібно виконати наступні дії:

1.                   Задати елементу ширину, яка менше ширини батьківського контейнера.

2.                   Задати для зовнішніх відступів праворуч і ліворуч значення auto.

Приклади коду:

selector {

width: 100px;

margin: 0 auto;

}

 

selector {

width: 100px;

margin-left: auto;

margin-right: auto;

}

 

11.                       Блочна модель і рядкові елементи

Ще раз акцентуємо увагу на особливості поведінки рядкових елементів в блочній моделі:

1.                   Не реагують на CSS-властивості width та height.

2.                   Частково реагують на margin, сприймаючи тільки горизонтальні відступи.

3.                   Частково реагують на padding, сприймаючи тільки горизонтальні відступи.

4.                   При заданні вертикальних padding візуально збільшуються, але без займаної області (вони не відштовхнуть інші елементи).

5.                   Сприймають рамки. Аналогічно padding рамки зверху і знизу не збільшують займане елементом місце.

12.                       Ширина 100% і ширина за замовчуванням

CSS-властивість width задає не загальну ширину блоку, а тільки ширину вмісту. Загальна ширина блоку потім складається з трьох компонентів: ширини вмісту, внутрішніх відступів і ширини рамок зліва і справа.

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

Перший варіант. Варіант за замовчуванням, коли ширина не задана, відповідає значенню width: auto;. У цьому випадку блок займає всю ширину батьківського блоку. Якщо у блока є внутрішні відступи або рамки, то його ширина вмісту автоматично зменшується, а загальна ширина залишається рівною ширині батька.

Другий варіант. Коли ширина блоку задана явно, наприклад, width: 100%;. У цьому випадку ширина вмісту блоку дорівнює ширині батьківського блоку. Якщо блоку додати внутрішні відступи і рамки, то його загальна ширина стає більше ширини батька.

13.                       Проблеми звичайної блокової моделі

У чому проблема описаного механізму розрахунку ширини ?. Адже можна просто не здавати ширину, використовуючи auto, або просто підбирати розміри блоків і відступів.

Проблеми починаються, коли сітка «резинова» і елементи в ній повинні адаптуватися. Найпростіший приклад: форма, в якій поля повинні займати всю ширину контейнера, але при цьому мати фіксовані внутрішні відступи, щоб текст не «прилипав» до країв.

Для такої форми можна задати такі стилі:

input [type = "text"] {

width: 100%;

padding: 0 10px;

}

Ширина 100% змусить поля бути такої ж ширини, як батьківський блок, а padding додасть відступи. Але, як ви вже здогадалися, за рахунок відступів поле стане ширше свого контейнера.

14.                       Змінюємо блокову модель, властивість box-sizing

Проблему з шириною адаптивних полів вирішити складно. Ідеальним варіантом було б зміна алгоритму розрахунку ширини елемента, щоб властивість width розраховувала не ширину змісту, а загальну ширину.

На щастя, така можливість була додана в CSS3 за допомогою властивості box-sizing, яка вже підтримується більшістю сучасних браузерів.

Ця властивість має два значення:

1.                   content-box   - Значення за замовчуванням, відповідає стандартній блокової моделі.

2.                   border-box   - Змінює режим розрахунку ширини елемента на описаний вище.

Дану властивість краще задавати з використанням префіксів, щоб зберегти сумісність браузерів:

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

 box-sizing: border-box;

 

15.                       Управління відображенням елемента, властивість display

Тип елемента не є чимось однозначним і незмінним, його можна змінювати за допомогою CSS. За це відповідає властивість display.

З його допомогою, наприклад, можна зробити абзаци і заголовки рядковими, а span і strong блоковими елементами.

У властивості display багато значень. З двома з них ви вже заочно познайомилися. Властивість display: block позначає блоковий елемент, а display: inline   - Рядковий.

16.                       display: inline-block

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

Але більш простий спосіб   - Використовувати блочно-рядкові елементи. У HTML немає тегів, які б за замовчанням вели б себе як блочно-рядкові, але будь-який елемент можна перемкнути в даний режим, задавши йому властивість display із значенням inline-block.

Особливості блочно-рядкових елементів:

·   їм можна задавати розміри, рамки і відступи, як і блоковим елементам;

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

·   вони не породжують примусових переносів рядків, тому можуть розташовуватися на одному рядку, поки поміщаються в батьківський контейнер;

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

17.                       display: table

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

Однак, семантично таблиці не призначені для розмітки сіток і поступово від них відмовилися.

Пізніше було розроблено сімейство значень властивості display, яке дозволяє задати табличну поведінку будь-яким елементами.

Перше значення   - Display: table задає елементу тип таблиця. Особливості табличних елементів:

1.                   можна задавати ширину, висоту, рамки, відступи;

2.                   за замовчуванням ширина залежить від змісту;

3.                   переносяться рядки до і після елемента.

Табличні елементи схожі на блокові за винятком ширини за замовчуванням.

18.                       display: table-row

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

Будь-яка таблиця містить елементи рядок таблиці, усередині яких повинні міститися елементи комірка таблиці. Відповідність тегів таблиці значенням display:

<table>   - Display: table;

<tr>   - Display: table-row;

<td>   - Display: table-cell;

У цьому завданні ви створите рядки таблиці за допомогою display: table-row;. Рядок   - Незвичайний елемент. Вона є контейнером для клітинок і практично не має власного відображення. Для неї можна тільки задавати колір фону.

19.                       display: table-cell

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

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

До таблиць, створених за допомогою CSS, можна застосовувати ті ж властивості, що й до звичайних таблиць. Наприклад, задавати відступи між клітинками або режим «суміщення» границь.

20.                       display: none

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

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

Є ще одна CSS-властивість, яка використовується для приховування елементів. Ця властивість visibility зі значенням hidden. Воно «ховає» елемент   - Він стає невидимим, але займає місце на сторінці.