CSS Макет - Властивість display
Властивість display є найбільш важливою властивістю CSS для управління макетом.
Властивість display
Властивість display визначає, як елемент відображається.
Кожен елемент HTML має значення, що відображається за замовчуванням в залежності від типу елемента. Значенням за замовчуванням для більшості елементів є block або inline.
Натисніть, щоб показати панель
Ця панель містить елемент <div> що за замовчуванням приховано (display: none).
Він стилізований за допомогою CSS, і ми використовуємо JavaScript для його відображення (змініть його на (display: block).
Блочні елементи
Блочний елемент завжди починається з нового рядка й займає всю доступну ширину (розтягується вліво та вправо, наскільки це можливо).
Приклади блочних елементів:
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
Вбудовані (рядкові) елементи
Вбудований елемент не починається з нового рядка і займає стільки ширини, скільки необхідно.
Це вбудований елемент <span> всередині параграфу.
Приклади вбудованих елементів:
- <span>
- <a>
- <img>
Display: none;
display: none; зазвичай використовується з JavaScript для приховування та відображення елементів без їх видалення та повторного створення. Подивіться останній приклад на цій сторінці, якщо ви хочете знати, як цього можна досягти.
Елемент <script> використовує display: none; за замовчуванням.
Перевизначити значення display за замовчуванням
Як вже згадувалось, кожен елемент має значення за замовчуванням, що відображається. Однак ви можете перевизначити його.
Заміна вбудованого елемента на блочний або навпаки може бути корисною для надання сторінці оригінального вигляду і при цьому збереження вебстандартів.
Типовим прикладом є вбудовані елементи <li> для горизонтальних меню:
Примітка: Встановлення властивості відображення елемента лише змінює спосіб відображення елемента, а НЕ ТЕ, ЯКИЙ це елемент. Таким чином, вбудований елемент з display: block; не може містити інші елементи блоку всередині нього.
В наступному прикладі елементи <span> відображаються як блочні елементи:
В наступному прикладі елементи <a> відображаються як блочні елементи:
Щоб сховати елемент - використовувати display:none або visibility:hidden?
display:none
visibility:hidden
Скинути
Сховати елемент можна, встановивши для властивості display значення none. Елемент буде приховано, а сторінка буде відображатись так, якби елемента там не було:
Значення visibility:hidden; також приховує елемент.
Однак елемент все одно буде займати той самий простір, що і раніше. Елемент буде приховано, але все одно вплине на макет:
Більше прикладів
Відмінності між display: none; та visibility: hidden;
Цей приклад демонструє display: none; в порівнянні з visibility: hidden;
Використання CSS разом із JavaScript для відображення контенту
Цей приклад демонструє як використовувати CSS та JavaScript, щоб показати елемент при кліку.
Перевірте себе за допомогою вправ!
CSS Властивості Display/Visibility
| Властивість | Опис |
|---|---|
| display | Визначає, як має відображатися елемент |
| visibility | Визначає, чи повинен елемент бути видимим |
