display:none убирает элемент из layout; visibility:hidden сохраняет место, но скрывает элемент; opacity:0 делает его прозрачным, сохраняя геометрию и обычно интерактивность.
В чем разница между display: none, visibility: hidden и opacity: 0?
display:none убирает элемент из layout; visibility:hidden сохраняет место, но скрывает элемент; opacity:0 делает его прозрачным, сохраняя геометрию и обычно интерактивность.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
display:none убирает элемент из layout; visibility:hidden сохраняет место, но скрывает элемент; opacity:0 делает его прозрачным, сохраняя геометрию и обычно интерактивность.
display:none и visibility:hidden обычно исключают элемент из дерева доступности и фокуса. Прозрачный элемент может получать клики и клавиатурный фокус, поэтому одной opacity недостаточно для скрытия управления. У visibility потомок может явно вернуть visible; для opacity родителя прозрачность затрагивает всю композицию потомков.