Create: Update:
Какое свойство позволяет вам спрятать элемент, но сохранить занимаемое им пространство на странице?
Это свойство называется visibility. Это свойство может принимать несколько значений, но основными для скрытия элемента являются visible и hidden.
.hidden-element {
visibility: hidden;
}
По умолчанию, элементы имеют значение
visibility: visible;, что означает, что они видимы на странице.Когда элементу назначается значение
visibility: hidden;, он становится невидимым, но продолжает занимать то же пространство в макете страницы, что и когда он был видимым.В этом примере, второй
<div> с классом hidden-element скрыт, но продолжает занимать место на странице. Третий <div> расположен после него, как если бы скрытый элемент был видимым.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.hidden-element {
visibility: hidden;
}
.visible-element {
background-color: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<div class="visible-element">Этот элемент видим.</div>
<div class="hidden-element">Этот элемент скрыт, но сохраняет место.</div>
<div class="visible-element">Этот элемент тоже видим и расположен после скрытого элемента.</div>
</body>
</html>
Зачем это нужно?
- Когда важно сохранить исходный макет и расположение элементов.
- Когда требуется временно скрыть элемент и затем снова сделать его видимым, не изменяя при этом расположение других элементов на странице.
Альтернативы
display: none;Это свойство полностью удаляет элемент из документа, как если бы его не было, освобождая занимаемое им место.
opacity: 0;Это свойство делает элемент полностью прозрачным, но элемент остается интерактивным и занимает место.
👉 @frontendInterview
>>Click here to continue<<
Frontend Interview - собеседования по Javascript / Html / Css
