visibility | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |||
6.0+ | 8.0+ | 1.0+ | 4.0+ | 9.5+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
Значение по умолчанию | visible |
---|---|
Наследуется | Да |
Применяется | Ко всем элементам |
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility |
Версии CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Описание
Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним. Если предполагается вывод разных элементов в одно и то же место экрана, для обхода этой особенности следует использовать абсолютное позиционирование или воспользоваться свойством display.
Синтаксис
visibility: visible | hidden | collapse | inherit
Значения
- visible
- Отображает элемент как видимый.
- hidden
- Элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы.
- collapse
- Если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden. В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено display: none. Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой. Это значение не поддерживается браузером Internet Explorer.
- inherit
- Наследует значение родителя.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>visibility</title> <style> . descr { visibility: hidden; } .b:hover + .descr { visibility: visible; } </style> </head> <body> <img src="images/button.gif" alt="Кнопка"> <div> Данная эксклюзия является подмножеством астрациональных супремативных монотенных федоний кадонарного экстрафазория.</div> </body> </html>
Объектная модель
[window.]document.getElementById(«elementID»).style.visibility
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit и collapse.
Браузер Safari до версии 4.0 не поддерживает значение collapse.
Opera до версии 9.5 воспринимает значение collapse как hidden для всех элементов.
Форматирование
CSS по теме
- visibility
Статьи по теме
Рецепты CSS
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: каскадные таблицы стилей
Свойство CSS Чтобы одновременно скрыть элемент и удалить его из макета документа , установите для свойства Свойство Окно элемента видно. Поле элемента невидимо (не нарисовано), но по-прежнему влияет на компоновку как обычно. Потомки элемента будут видны, если для них Ключевое слово Использование значения При анимации значения видимости интерполируются между видимыми и невидимыми . Следовательно, одно из начальных или конечных значений должно быть Первый абзац виден. Второй абзац НЕ виден. В браузере включена загрузка только таблиц BCD. Включите JavaScript для просмотра данных. Хотите принять участие? Узнайте, как внести свой вклад. Последний раз эта страница была изменена участниками MDN. Абель Лифаефи Мбула Бесплатный курс собеседования по проектированию систем Получите полный справочник по собеседованиям по проектированию систем от Educative бесплатно. Когда мы скрываем содержимое При Давайте рассмотрим следующий пример, чтобы узнать, как использовать эти свойства CSS на странице HTML. #container { display: flex; выравнивание содержимого: пробел между; ширина: 71см; } #слева, #справа { ширина: 35em; } #left div:first-child, #right div:first-child { background: Olivedrab; } #left 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 { отображение: нет; } Теперь давайте присоединим файл CSS к HTML и посмотрим, что произойдет с текстом внутри него. Как видно из результата, у нас есть два блока: правый (контрольный) и левый (тестовый). У них точно такие же элементы, а именно четыре Слева видно все содержимое, тогда как в правом блоке мы используем Теперь проанализируем результат. Затем мы применяем Как мы уже говорили выше, Вы также можете заметить, что в В этом примере мы увидим, как свойства ведут себя с дочерними узлами. Здесь мы будем использовать встроенные стили CSS. Это родительская область Я ребенок В приведенном выше фрагменте кода родительская область скрыта, но дочерняя область видна, если мы используем Это родительская область Я ребенок Пользователю ничего не показывается, хотя мы попросили отобразить дочерний видимость
показывает или скрывает элемент без изменения макета документа. Свойство также может скрывать строки или столбцы в .
display
значение none
вместо использования видимости
/* Значения ключевых слов */
видимость: видимая;
видимость: скрытая;
видимость: коллапс;
/* Глобальные значения */
видимость: наследовать;
видимость: начальная;
видимость: вернуться;
видимость: обратный слой;
видимость: не установлена;
видимости
указано как одно из значений ключевого слова, перечисленных ниже. Значения
видимые
скрытый
видимость
visible
. Элемент не может получить фокус (например, при навигации по индексам вкладок). обрушение
свернуть
имеет разные эффекты для разных элементов: <таблицы>
строк, столбцов, групп столбцов и групп строк строки или столбцы скрыты, а занимаемое ими пространство удалено (как если бы
были применены к столбцу/строке таблицы). Однако размер других строк и столбцов по-прежнему рассчитывается, как если бы ячейки в свернутой строке (строках) или столбце (столбцах) присутствовали. Это значение позволяет быстро удалить строку или столбец из таблицы без принудительного пересчета ширины и высоты для всей таблицы. отображать
: нет свернуть
обрабатывается так же, как скрытый
. visible
hidden
для элемента удалит его из дерева специальных возможностей. Это приведет к тому, что элемент и все его дочерние элементы больше не будут объявляться технологией чтения с экрана. видимым
, иначе интерполяция невозможна. Значение интерполируется как дискретный шаг, где значения временной функции между 0
и 1
сопоставляются с видимыми
и другими значениями временной функции (которые возникают только в начале/конце перехода или как результат кубический-безье ()
функций со значениями y за пределами [0, 1]) сопоставляются с более близкой конечной точкой.
отсутствует или частично некорректен в некоторых современных браузерах. Это может неправильно обрабатываться как видимость: скрытый
для элементов, отличных от строк и столбцов таблицы. видимость: свернуть
может изменить макет таблицы, если таблица имеет вложенные таблицы в ячейках, которые свернуты, если только видимость: видимая
указывается явно для вложенных таблиц. Initial value visible
Applies to all elements Inherited yes Computed value as specified Animation type a visibility видимость =
видимость |
скрыто |
коллапс Базовый пример
HTML
CSS
.видимый {
видимость: видимая;
}
.невидимый {
видимость: скрытая;
}
Пример таблицы
HTML
1.1
1.2
1.3
<тд>2.1
2.2
2.3
<тд>3.1
<тд>3.2
<тд>3.3
CSS
.collapse {
видимость: коллапс;
}
стол {
граница: 1px сплошной красный;
}
тд {
граница: 1px сплошной серый;
}
Спецификация Модуль отображения CSS Уровень 3
# видимость дисплей
Обнаружили проблему с содержанием этой страницы?
Что такое видимость скрыта и не отображается в CSS?
HTML
для клиента, в таблицах стилей CSSCascade можно использовать два основных метода. visibility: hidden
— это свойство CSS делает текст невидимым , но выделенное для него место останется. Другими словами, элемент скрыт от просмотра, но не от потока страницы. display: none
— в отличие от первого свойства, это означает, что элемент вообще не будет отображаться на странице. В этом случае тег удаляется из обычного потока страницы, что позволяет другим элементам заполнить его. видимости: скрыто
место остается выделенным для текста. Это не относится к display: none
. Код
Код HTML
Код CSS
Пример 1
Пояснение
. видимость: скрыто
и отображение: нет
для некоторых тегов. видимость: скрытый
используется для первого div
в тестовом блоке (справа). В результате содержимое скрыто , но место для него все еще доступно. Это потому что видимость: скрытый
скрывает элемент, но оставляет его в потоке страницы. display: none
to display: none
скрывает элемент и удаляет его из обычного потока страницы.: скрытый
для элемента span
. Пример 2
<дел>
display: none
в том же контексте, что и здесь:
div
(используя display: block
).