junior
В чем разница между display: none и visibility: hidden?
Оба свойства скрывают элемент, но делают это по-разному.
| Характеристика | display: none |
visibility: hidden |
|---|---|---|
| Элемент виден | Нет | Нет |
| Занимает место в раскладке | Нет — элемент полностью исключён из потока | Да — пустое место остаётся |
| Дочерние элементы | Скрыты и не могут быть показаны отдельно | Могут быть показаны через visibility: visible |
| Анимация/transition | Нельзя анимировать (нет промежуточных состояний) | Можно анимировать |
| Доступность (screen readers) | Элемент игнорируется | Элемент игнорируется |
| События (клик) | Не срабатывают | Не срабатывают |
Третий вариант: opacity: 0
Пример
.hidden-opacity {
opacity: 0;
}
Элемент невидим, но занимает место и реагирует на клики. Полезен для анимаций появления/исчезновения.
На собеседовании: главное — объяснить, что
display: noneубирает элемент из потока, аvisibility: hiddenоставляет пустое место. Дополнительный плюс — упомянутьopacity: 0как третий вариант.