Скрытие элементов CSS
Вы можете скрывать элементы с помощью CSS, используя свойство display или visibility.
CSS display: none;
При display: none элемент полностью удаляется из потока документа и не занимает места.
Часто используется вместе с JavaScript для показа или скрытия элементов без их удаления и повторного создания.
Скрытие элемента - использовать display:none или visibility:hidden?
Вы можете скрыть элемент, установив display: none. Элемент скрывается, и страница отображается так, будто его там нет.
Вы также можете использовать visibility: hidden, чтобы скрыть элемент. С этим свойством элемент скрыт, но всё ещё занимает то же место, что и раньше.
display: none
Скрытый заголовок исчезает и не занимает места.
Prompt
Страница HTML, скрывающая элемент с помощью display: none.
Во внутреннем блоке
<style> установите h1.hidden { display: none; }. Добавьте два заголовка: обычный и с классом "hidden". Скрытый исчезает и не занимает места.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1.hidden {
display: none;
}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This heading is hidden with display: none</h1>
<p>Notice that the hidden heading takes up no space.</p>
</body>
</html>
visibility: hidden
Скрытый заголовок исчезает, но всё ещё занимает своё место.
Prompt
Страница HTML, скрывающая элемент с помощью visibility: hidden.
Во внутреннем блоке
<style> установите h1.hidden { visibility: hidden; }. Добавьте два заголовка: обычный и с классом "hidden". Скрытый исчезает, но всё ещё занимает своё место.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This heading is hidden with visibility: hidden</h1>
<p>Notice that the hidden heading still takes up its space.</p>
</body>
</html>
Свойства CSS Display/Visibility
Краткое описание использованных здесь свойств:
display— задаёт, как отображается элемент;noneудаляет его из потока.visibility— задаёт, виден ли элемент;hiddenскрывает его, но сохраняет место.