Зміст:
display none – це CSS властивість, яка дозволяє приховати елемент на веб-сторінці. При використанні цієї властивості елемент не відображається на екрані і займає нульову площу.
Коли елемент має значення display none, він не тільки стає невидимим, але його розташування не враховується в макеті сторінки. Це відрізняє display none від інших властивостей, таких як visibility: hidden або opacity: 0, які тільки приховують елемент, але залишають місце для нього в макеті сторінки.
Використання display none може бути корисним, коли потрібно тимчасово приховати елементи, щоб не відображати їх на екрані. Наприклад, це може бути корисним при створенні адаптивного дизайну, коли на різних пристроях потрібно приховувати або відображати певні елементи.
| Що робить display none |
|---|
| display: none приховує елемент зі сторінки, проте він все одно посідає місце у потоці документа. Це означає, що інші елементи не зрушуються та зберігають свої позиції. Ця властивість впливає на всі типи елементів. |
Чим відрізняється display none від visibility?
🛠 Важлива особливість властивості, що вона, на відміну від display: none або opacity: 0 , не просто ховає батька, а успадковується на всі дочірні елементи. Це означає, що цю поведінку можна переписати і вкладений елемент з visibility: visible буде видно.
Що робить display?
Властивість display визначає тип відображення елемента, як він відображатиметься на веб-сторінці: як блок, малий елемент або якимось іншим способом.
Що робить display inline?
display: inline Перетворює будь-який елемент на малий, якби він був лише простим текстом. Часто використовується створення горизонтальної навігації, де семантично, але з візуально корисні пункти списку.
Що робить дисплей блок?
Наприклад, елемент <li> тип боксу за замовчуванням — display: block . Це означає, що елементи списку відображаються один під одним на сторінці. Якщо змінити тип відображення <inline> , елементи списку будуть відображатися поруч один з одним, начебто це слова в реченні.