visibility — CSS | MDN
Свойство visibility
скрывает или показывает элемент без изменения разметки документа. Также скрывает строки и столбцы <table>
(en-US).
Чтобы скрыть и удалить элемент из разметки, установите свойству display
значение none
, вместо использования visibility
.
/* Значения */ visibility: visible; visibility: hidden; visibility: collapse; /* Глобальные значения */ visibility: inherit; visibility: initial; visibility: unset;
Свойство visibility
указывается в качестве одного из значений ниже.
Значения
visible
Значение по умолчанию, элемент виден.
hidden
Элемент не виден (полностью прозрачный, ничего не отображается), но продолжает влиять на шаблон. Потомки элемента могут быть показаны с помощью свойства
visibility:visible
.collapse
* Для строк, столбцов, групп столбцов и групп строк в таблице, которые должны быть удалены (как с помощью
применённого к столбцу/строке таблицы). Однако, размер других строк и столбцов должен продолжать вычисляться так, словно скрытые строки/столбцы присутствуют. Это создано для быстрого удаления строк/столбцов из таблицы без дополнительного вычисления ширины и высоты частей таблицы.display
: none- Для XUL элементов размер всегда равен 0, независимо от других стилей, влияющих на размер, хотя отступы продолжают учитываться.
- Для других элементов
collapse
обрабатывается также, какhidden
Синтаксис
visibility =
visible | (en-US)
hidden | (en-US)
collapse
Значения видимости изменяются между видим и не видим. Интерполяция будет, если одно из начальных или конечных значений будет видимо или нет. Если одно из значений visible
, интерполируется как дискретный шаг, где значения временной функции от 0
до 1
для visible
и другие значения временной функции (которые происходят только в начале/конце перехода, или как результат функции cubic-bezier()
со значениями вне [0, 1]) ближе к конечной точке.
Базовый пример
HTML
<p>Первый параграф виден.</p> <p>Второй параграф не виден.</p> <p>Третий параграф также виден. Заметь, второй параграф занимает место.</p>
CSS
.visible { visibility: visible; } .not-visible { visibility: hidden; }
Пример с таблицей
HTML
<table> <tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> </tr> <tr> <td>2.1</td> <td>2. 2</td> <td>2.3</td> </tr> <tr> <td>3.1</td> <td>3.2</td> <td>3.3</td> </tr> </table>
CSS
.collapse { visibility: collapse; } table { border: 1px solid red; } td { border: 1px solid gray; }
Использование visibility
со значением hidden
на элементе удалит его из дерева доступности. Это приведёт к тому, что элемент и все его дочерние элементы больше не будут показаны в скринридерах.
- Поддержка
visibility:collapse
отсутствует или частично не работает в некоторых современных браузерах. Во многих случаях может не корректно работатьvisibility:hidden
со столбцами и строками. visibility:collapse
может изменить шаблон таблицы, если таблица содержит вложенные таблицы, покаvisibility:visible
не указан явно для вложенной таблицы.
Specification | Status | Comment |
---|---|---|
CSS Flexible Box Layout Module Определение ‘visibility’ в этой спецификации. | Кандидат в рекомендации | Определяет значение collapse применимым к flex элементам |
CSS Box Model Определение ‘visibility’ в этой спецификации. | Кандидат в рекомендации | Без изменений |
CSS Transitions Определение ‘visibility’ в этой спецификации. | Рабочий черновик | Определяет visibility как анимируемое. |
CSS Level 2 (Revision 1) Определение ‘visibility’ в этой спецификации. | Рекомендация | Изначальное определение |
Начальное значение | visible |
---|---|
Применяется к | все элементы |
Наследуется | да |
Обработка значения | как указано |
Animation type | видимость |
BCD tables only load in the browser with JavaScript enabled.
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
Want to get more involved?
Learn how to contribute.
This page was last modified on by MDN contributors.
CSS свойство visibility
❮ Назад Вперед ❯
Свойство visibility используется для отображения или скрытия элемента.
Свойство имеет следующие значения: visible, hidden и collapses.
При значении «hidden» контент данного тега становится полностью прозрачным, а место, которое элемент занимает, остается за ним. Но дочерние элементы скрытого элемента могут быть отображены при применении visibility:visible.
Некоторые браузеры не используют значение «collapse».
visibility: visible | hidden | collapse | initial | inherit;
Пример
<!DOCTYPE html> <html> <head> <title>Заголовок документа</title> <style> p { visibility:hidden; } </style> </head> <body> <h3>Пример свойства visibility. </h3> <div>Какой-нибудь текст.</div> <p>Текст, который не будет отображен в браузере.</p> <div>Вы видите пространство сверху от этого предложения, но на самом деле это текст, для которого установлено значение hidden.</div> </body> </html>
Попробуйте сами!
Пример со значениями «visible» и «hidden»:
Пример
<!DOCTYPE html> <html> <head> <title>Заголовок документа</title> <style> .test1 { visibility: visible; } .test2 { visibility: hidden; } </style> </head> <body> <h3>Пример свойства visibility</h3> <p>Lorem Ipsum - это текст-"рыба".</p> <p>Lorem Ipsum - это текст-"рыба".</p> <p>В пространстве сверху находится скрытый текст.</p> </body> </html>
Попробуйте сами!
Пример со значением «collapse»:
Пример
<!DOCTYPE html> <html> <head> <title>Заголовок документа</title> <style> .collapse { visibility: collapse; } table { border: 2px solid #666; } td { border: 1px solid #ccc; } </style> </head> <body> <h3>Пример свойства visibility</h3> <p>Применено значение "collapse".</p> <table> <tr> <td>10</td> <td>100</td> <td>1000</td> </tr> <tr> <td>20</td> <td>200</td> <td>2000</td> </tr> <tr> <td>30</td> <td>300</td> <td>3000</td> </tr> <tr> <td>40</td> <td>400</td> <td>4000</td> </tr> </table> </body> </html>
Попробуйте сами!
Макет CSS — свойство отображения
❮ Предыдущий Далее ❯
Свойство display
является наиболее важным свойством CSS для управления макетом.
Свойство отображения
Свойство отображения
определяет, отображается ли элемент и каким образом.
Каждый элемент HTML имеет отображаемое значение по умолчанию в зависимости от типа
элемента это. По умолчанию для большинства элементов отображается значение
или встроенный
.
Нажмите, чтобы показать панель
Эта панель содержит элемент
display: none
). Он оформлен с помощью CSS, и мы используем JavaScript для его отображения (измените его на ( display: block
).
Элементы уровня блока
Элемент уровня блока всегда начинается с новой строки и занимает доступна полная ширина (тянется влево и вправо, насколько это возможно).
Элемент
Примеры блочных элементов:
—
- <р>
- <форма>
- <заголовок>
- <нижний колонтитул>
- <раздел>
Встроенные элементы
Встроенные элементы не начинаются с новой строки и занимают ровно столько ширины, сколько необходимо.
Это встроенный элемент внутри абзаца.
Примеры встроенных элементов:
- <диапазон>
- <а>
- <изображение>
Дисплей: нет;
дисплей: нет;
обычно используется с JavaScript, чтобы скрыть и показывать элементы, не удаляя и не создавая их заново. Взгляните на нашу последнюю пример на этой странице, если вы хотите знать, как этого можно достичь.Элемент
display:none;
по умолчанию.Переопределить отображаемое значение по умолчанию
Как уже упоминалось,у каждого элемента есть отображаемое значение по умолчанию.Однако вы можете отменить это.
Преобразование встроенного элемента в блочный элемент или наоборот может быть полезно для придать странице особый вид и при этом следовать веб-стандартам.
Типичным примером является создание встроенных элементов
для горизонтальных меню:Пример
li {
display: inline;
}Попробуйте сами »
Примечание: Установка свойства отображения элемента изменяет только способ отображения элемента , НЕ какой это элемент. Итак, строчный элемент с
display: block;
не допускается чтобы внутри него были другие блочные элементы.В следующем примере элементы отображаются как блочные элементы:
Пример
span {
display: block;
}Попробуйте сами »
В следующем примере элементы отображаются как блочные элементы:
Пример
a {
display: block;
}Попробуйте сами »
Скрыть элемент - отображение: нет или видимость: скрыто?
отображение:нет
видимость:скрыто
Сброс
Скрытие элемента можно выполнить, установив для свойства
display
значениенет
. Элемент будет скрыт, а страница будет отображаться так, как если бы элемент не был там:Пример
h2.hidden {
отображение: нет;
}Попробуйте сами »
видимость:скрыта;
также скрывает элемент.Однако элемент по-прежнему будет занимать то же место как прежде. Элемент будет скрыт, но все равно повлияет на макет:
Пример
h2.hidden {
visibility: hidden;
}Попробуйте сами »
Другие примеры
Различия между отображением: нет; и видимость: скрытая;
Этот пример демонстрирует display: none; по сравнению с видимостью: скрыто;Использование CSS вместе с JavaScript для отображения содержимого
В этом примере показано, как использовать CSS и JavaScript для отображения элемента на нажмите.Проверьте себя с помощью упражнений
Упражнение:
Скройте элемент
. Он по-прежнему должен занимать то же место, что и раньше.
<стиль> ч2 { : ; } <тело>
Это заголовок
Это абзац
Это абзац
Начать упражнение
Свойства отображения/видимости CSS
Свойство Описание дисплей Указывает, как должен отображаться элемент видимость Указывает, должен ли элемент быть видимым ❮ Предыдущий Далее ❯
Что такое видимость скрыта и нет отображения в CSS?
Абель Лифаефи Мбула
Grokking the Behavioral Interview
Получите бесплатный курс Educative по подготовке к собеседованию.
Когда мы скрываем содержимое
HTML
для клиента, в таблицах стилей CSSCascade можно использовать два основных метода.visibility: hidden
— это свойство CSS делает текст невидимым , но выделенное для него место останется. Другими словами, элемент скрыт от просмотра, но не от потока страницы.display: none
- в отличие от первого свойства, это означает, что элемент вообще не будет отображаться на странице. В этом случае тег удаляется из обычного потока страницы, что позволяет другим элементам заполнить его.
При
видимости: скрыто
место остается выделенным для текста. Это не относится кdisplay: none
.Код
Код HTML
Давайте рассмотрим следующий пример, чтобы узнать, как использовать эти свойства CSS на HTML-странице.
Код CSS
#container {
display: flex;
выравнивание содержимого: пробел между;
ширина: 71см;
}
#слева,
#справа {
ширина: 35em;
}
#left div:first-child,
#right div:first-child {
background: Olivedrab;
}
#левый div:nth-child(2),
#right div:nth-child(2) {
фон: оранжевый;
}
#left div:nth-child(3),
#right div:nth-child(3) {
background:cadetblue;
}
#left div:last-child,
#right div:last-child {
background:orchid;
}
. vh {
видимость: скрыто;
}
.dn {
отображение: нет;
}
Пример 1
Теперь давайте присоединим файл CSS к HTML и посмотрим, что произойдет с текстом внутри него.
Объяснение
Как видно из результата, у нас есть два блока: правый (контрольный) и левый (тестовый). У них точно такие же элементы: четыре элемента
и один элемент тега
для некоторых тегов.Слева видно все содержимое, а справа мы используем видимость
: скрыто
и 9Отображение 0006: нетТеперь проанализируем результат.
видимость: скрытый
используется для первогоdiv
в тестовом блоке (справа). В результате содержимое скрыто , но место для него все еще доступно. Это связано с тем, чтовидимость: скрытый
скрывает элемент, но по-прежнему оставляет его в потоке страницы.Затем мы применяем
display: none
to. Вы видите, что содержимое полностью исчезает, а его пространство используется другими элементами (т. е.в этом примере).Как мы уже говорили выше,
display: none
скрывает элемент и удаляет его из обычного потока страницы.Вы также можете заметить, что в
мы использовалиvisibility: hidden
для элементаspan
.Пример 2
В этом примере мы увидим, как свойства ведут себя с дочерними узлами. Здесь мы будем использовать встроенные стили CSS.
<дел>
Это родительская область
<дел>Я ребенок
В приведенном выше фрагменте кода родительская область скрыта, но дочерняя область видна, если мы используем
display: none
в том же контексте, что и здесь:Это родительская область
<дел>Я ребенок
Пользователю ничего не показывается, хотя мы попросили отобразить дочерний
div
(используяdisplay: block
).