Аліса в країні DIV. Магія блочних елементів

Дверцята відчинилися у вузесенький прохід, мало що більший за мишачу нору. Аліса стала навколішки й угледіла в глибині небаченої краси сад. І так їй закортіло вибратися з цього темного коридору між оті барвисті квітники та прохолодні водограї! Проте у дверцята не пролазила навіть її голова.
“А якби й пролізла, — подумала бідолашна Аліса, — то який у тому сенс? Кому потрібна голова без плечей. Якби ж то я могла складатись, як підзорна труба! Я напевно склалася б, аби лиш знаття, з якого кінця почати”.

Льюїс Керрол. “Аліса в Країні Див”

Коли я починала вчити верстку, то почувалася розгубленою, наче Аліса на порозі країни Див. Я могла годинами розглядати розкішні сайти, не маючи цілісного уявлення про те, як вони зроблені. Вивчити основні html теги і css стилі виявилося недостатньо — мені критично бракувало розуміння того, що змушує усе це працювати разом. Як і у випадку з Алісою, не обійшлося без магії. Тільки мені допомогли не чарівні наїдки і напої, а звичайні довідники і підручники (html & css is hard— мій улюблений).

У цьому тексті я буду говорити про діви (<div>), хоча абзаци, заголовки, елементи списків також належать до блочних. Якщо ви не впевнені, чи елемент є блочним — просто задайте йому фон або рамку. Блочний елемент розтягнеться по висоті свого контенту на всю ширину сторінки (або ж батьківського контейнера).

Для порівняння, ширину рядкових елементів (<a>, <span>, <em>, <strong>) визначає контент, тому вони розміщуються рядочком один за одним, скільки дозволяє розмір сторінки чи батьківського контейнера. При цьому висоту задавати їм безнадійно — вони cтворені для стилізації контенту, тому властивість height проігнорують.

Діви завжди розміщуються один під одним незалежно від висоти і ширини. Така особливість блочних елементів визначає “природний” або “статичний” потік HTML-документа (document flow), яким його “бачить” браузер. Проте і рядкові, і блочні елементи виглядають на екрані як прямокутники, яким можна задавати ту поведінку, яка вам потрібна. В цьому полягає справжня магія сss. Далі я розповім про декілька сss-властивостей, за допомогою яких можна творити дива.


display — багатоцільова властивість, яка визначає, як елемент буде показаний в документі. Застосовується до всіх елементів, проте не наслідується. Нараховує понад десяток різних значень, але я зосереджуся на кількох найбільш цікавих і корисних. Парочка display: inline перетворює блочний елемент у рядковий, display: block — рядковий у блочний, а display: inline-block має суперсилу згенерувати елемент, який можна форматувати як блочний, але поводитися він буде як рядковий (якщо задати це правило спанам — їм можна буде задати висоту, так само як дівам; а якщо дівам — вони стануть рядочком, як спани). Це дуже зручно, коли з елементів списку треба зробити горизонтальне меню, або застилізувати посилання як кнопку.

display: flex— застосовують до контейнерів для створення адаптивних макетів. Flexbox — це найновіший стандарт CSS3, а тому підтримується не всіма браузерами (про всяк випадок, краще добавити display: -webkit-flex;), проте можливості його дивовижні. Flexbox дає розробникам повний контроль над вирівнюванням блоків контейнера — ми визначаємо їхній розмір, порядок і напрямок розташування по вертикалі і горизонталі.

display: grid— головний конкурент flexbox за право називатися найкращим інструментом для дизайну користувацьких інтерфейсів на css. Головна відмінність сітки від флексбокса — її двовимірність (це означає, що елементи сітки вміють не лише вирівнюватися в рядки чи стовпчики, але й накладатися один на одного). “Слід усвідомлювати, що CSS Grid ще не можна використовувати в продакшені. Поки що це лише чернетка, що все ще нормально не підтримується ні в одному браузері (без додаткових налаштувань). — застерігають на codeguida.com, і майже відразу додають — Але вивчити її потрібно вже зараз.”

display: none— тимчасово видаляє елемент з документа. При цьому місце, яке він займав, не резервується, і сторінка виглядає так, наче його там ніколи і не було. Повернути його на місце можна з допомогою JavaScript. Тому якщо ви хочете тільки сховати елемент, краще скористатися visibility:hidden. Щоби відчути різницю — зайдіть на w3schools.com, і потицяйте приклади в кінці сторінки.


Я задумувала цей текст як короткий вступ до блочної моделі css, але натомість вмудрилась написати про альтернативні моделі flexbox і grid. Звичайно, на практиці дуже часто ти спочатку пишеш код, а вже потім починаєш розуміти, чому він спрацьовує так, а не інакше. Однак, читати у процесі навчання теоретичні нотатки рідною мовою — безцінно. Тому я щиро сподіваюся, що моя писанина буде комусь корисною. Це лише початок захопливої історії про країну DIV — залишайтеся на зв’язку!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.