Типи елементів
Last updated
Last updated
В CSS існують різні типи елементів, які можуть мати стилі застосовані до них. Найпоширеніші типи - це блокові (block) і рядкові (inline) елементи. В залежності від типу елементу і визначається його поведінка. Тип елементу зберігається у його властивості display.
Елементи блоку (Block-level Elements): Елементи, які займають всю доступну ширину горизонтальної просторі на сторінці та завжди починаються з нового рядка. Приклади: <div>, <p>, <h1>, <ul>, <li>, <table>, тощо.
Елементи інлайну (Inline Elements): Елементи, які займають лише тільки необхідну ширину, не починаючи новий рядок. Вони відображаються поруч із попереднім елементом або текстом. Приклади: <span>, <a>, <strong>, <em>, тощо.
Елементи, які можуть бути і блоковими, і інлайновими (Inline-Block Elements): Ці елементи виглядають як інлайнові елементи, але вони мають можливість мати ширину та висоту, як блокові елементи. Приклади: <img>, <button>, тощо.
Блокові елементи (block-level elements) - це елементи веб-сторінки, які займають всю доступну ширину на сторінці (або в елементі батька) та завжди починаються з нового рядка. Це означає, що блоковий елемент завжди відображатиметься у новому блоковому контейнері (або блоці) на сторінці. Тобто блокові елементи розмішуються вертикально один під одним. Такі елементи можуть містити інші блокові елементи, а також інлайн-елементи та текст.
Щоб елемент зробити блоковим, потрібно йому задати відповідну властивість display
Висота блочного елемента вищначається його вмістом, якщо не залана явно властивість height. Бллковим елементам можна задавати будь-які властивості геометрії елемента: ширину, висоту, поля, рамки і відступи.
Якщо ширина блокових елементів задана явно (Фіксована ширина), то вони все одно будуть розташовуватися вертикально один під одним. Вільний простір в рядку за замовчуванням займе правий зовнішній відступ елемента.
Як бачимо із наведеного вище, у блокових елементів може бути автоматичний зовнішній відступ з правого боку. Наприклад, коли фіксована ширина блоку.
Таким чином додавши автоматичний зовнішній відступ з обох боків ми можемо горизонтально відцентрувати блоковий елемент.
Можна використовувати і короткий запис відступів. Якщо, наприклад верхній і нижній відступ має бути 0px, то це відповідає такому запису.
В CSS термін "контейнер" (container) не є вбудованою або спеціальною властивістю. Зазвичай контейнер - це елемент HTML або блок (часто несемантичний тег <div> із класом container), який використовується для обгортання інших елементів або контенту на веб-сторінці. Цей термін може використовуватися для позначення елемента, який визначає ширину, внутрішні відступи і горизонтальне центрування вмісту всередині нього.
Такі елементи часто називають ще обгорткою, враппером чи центрувальником.
Для створення контейнера, який центрує свій вміст горизонтально, можна використовувати властивість margin зі значенням auto. Це призведе до автоматичного розподілу відступів зліва і справа, що призведе до центрування блока на сторінці.
Крім того, щоб макет зліва і справа не "прилипав" до вікна браузера, задають бокові внутрішні відступи і весь вміст таким чином буде відступати від країв контейнера.
У прикладі вище у секції міститься контейнер і він автоматично центрується по горизонту. Також по боках є внутрішній відступ, тому контент не "прилипає" до рамки контейнера.
Можна один і той само стиль контейнера використовувати для різних секцій. Використовують патерн вкладеного контейнера в секцію тому, що в такому разі можна задати колір заливки всій секції на всю ширину екрана при цьому обмеживши вміст і відцентрувавши його на екрані. А внутрішніми відступами секції згори і знизу задати візуальний відступ контенту від країв секції.
Рядкові елементи (inline elements) - це елементи веб-сторінки, які не розпочинають нового рядка і займають тільки стільки простору, скільки потрібно для відображення вмісту всередині них. Вони відображаються поруч із попереднім елементом або текстом, не перериваючи поточний рядок тексту.
Щоб елемент зробити рядковим, потрібно йому задати відповідну властивість display.
Ширина і висота рядкових елементів залежать тільки від вмісту і їх явно задати не можна (width і height - ігноруються). Рядкові елементи розташовуються в рядку поки в ньому є достатньо місця. При переповненні - переносяться на наступний рядок.
Рядковим елементам можна задавати тільки горизонтальну геометрію: ліві та праві поля, відступи та рамки. Значення верхніх і нижніх margin, padding і border - ігноруються.
У рядкових і рядково-блокових елементів автоматично додається правий проміжок. У зображень - це нижній проміжок. Це не margin і не padding, а особливість таких елементів. Тобто обнуливши відступи - його не прибрати, бо він не є частиною стилізації.
Величина цього проміжку становить 1/4 розміру шрифту найближчого предка. За замовчанням браузер встановлює шрифт 16px. Тому цей відступ буде 4px.
Особливо надокучливий це відступ у зображень знизу. Для того, щоб його прибрати - зображення потрібно зробити блоковим елементом.
Вище ми згадували, що вертикальну геометрію рядкових елементів не змінити, вони не збільшують розмір елемента, але відображаються. Зокрема колір рамки і заливки будуть відображатися і можуть залізти на сусідні блоки, розташовані по вертикалі.
Рядково-блокові елементи (inline-block elements) - це особливий тип елементів у CSS, який поєднує властивості рядкових і блокових елементів. Вони відображаються у рядку, як рядкові елементи, але водночас вони можуть мати ширину, висоту, внутрішні відступи і зовнішні відступи, як у блокових елементів.
Щоб елемент зробити рядково-блочним, потрібно йому задати відповідну властивість display.
Ширина і висота рядково-блокових елементів залежить вмісту, але їх можна задати за допомогою властивостей width і height.
Рядково-блокові елементи розташовуються в рядку поки в ньому є достатньо місця. При переповненні переносяться на наступний рядок.
Рядково-блоковим елементам можна задавати будь-які властивості геометрії елемента: ширину, висоту, поля, рамки та відступи.
Рядково-блокові елементи використовують, коли потрібно оформити декоративні елементи, задати вертикальну геометрію, або вибудувати блокові елементи в рядок.
Приклади використання рядково-блокових елементів:
Список рядково-блокових елементів: Рядково-блокові елементи можна використовувати для створення горизонтальних списків або меню, де кожен пункт є окремим блоком, але всі вони відображаються в рядку.
Кнопки або елементи управління: Рядково-блокові елементи можна використовувати для створення кнопок або елементів управління, які виглядають як блоки, але розташовані в рядку.
Розміщення елементів в сітці: Рядково-блокові елементи можна використовувати для створення елементів у сітці, де кожен елемент є блоком, розташованим в рядку.
Властивість display: none; у CSS приховує елемент на сторінці, роблячи його невидимим для користувача. Елемент, який має display: none;, не відображається на сторінці і не займає місця в макеті, навіть якщо він присутній в HTML-структурі.
За допомогою JavaScript можна змінити властивість display на none, при виникненні якоїсь події. Але зміну display: none; не можна анімувати.
Зазвичай у таблиці стилів створюють клас-модифікатор і при виникненні якоїсь події він застосовується до якогось елемента, тобто додається в html як додатковий клас, який модифікує стилізацію.
Наприклад є на сторінці дві кнопки:
при натисканні першої показується елемент 1, а елемент 2 ховається
при натисканні другої показується елемент 2, а елемент 1 ховається
Відбувається це за допомогою, наприклад додавання чи видалення класу-модифікатора is-active.
При приховуванні елементів display: none; він просто прибирається із потоку і пошукові роботи пропускають ці елементи та навіть не індексують їх.
Часто потрібно приховати елемент, але щоб його бачили пошуковики. Найчастіше вживаний приклад, це приховати заголовок секції, але при цьому, щоб він проіндексувався. Якщо його просто прибрати, крім того, може виникнути помилка валідації. Для цього розробники використовують клас visually-hidden, який повністю приховує елемент, але не прибирає його з потоку. Таких класів існує безліч. Нижче показано один із найбільш вживаних.
Тип елемента можна дізнатися в або . Тип елемента можна примцсово поміняти, зоб змінити поведінку елемента. Для цього потрібно для елементу вказати властивість display у файлі стилів.
