visibility | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
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 1CSS 2CSS 2.1CSS 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 видимость показывает или скрывает элемент без изменения макета документа. Свойство также может скрывать строки или столбцы в

.

Чтобы одновременно скрыть элемент и удалить его из макета документа , установите для свойства 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
 
    <тд>2.1
    
    <тд>3.1
    <тд>3.2
    <тд>3.3
  
CSS
 .collapse {
  видимость: коллапс;
}
стол {
  граница: 1px сплошной красный;
}
тд {
  граница: 1px сплошной серый;
}
 
1.1 1.2 1.3
2.2 2.3
Спецификация
Модуль отображения CSS Уровень 3
# видимость

В браузере включена загрузка только таблиц BCD. Включите JavaScript для просмотра данных.

  • дисплей

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Посмотреть исходный код на GitHub.

Хотите принять участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена участниками MDN.

Что такое видимость скрыта и не отображается в CSS?

Абель Лифаефи Мбула

Бесплатный курс собеседования по проектированию систем

Получите полный справочник по собеседованиям по проектированию систем от Educative бесплатно.

Когда мы скрываем содержимое HTML для клиента, в таблицах стилей CSSCascade можно использовать два основных метода.

  1. visibility: hidden — это свойство CSS делает текст невидимым , но выделенное для него место останется. Другими словами, элемент скрыт от просмотра, но не от потока страницы.

  2. display: none — в отличие от первого свойства, это означает, что элемент вообще не будет отображаться на странице. В этом случае тег удаляется из обычного потока страницы, что позволяет другим элементам заполнить его.


При видимости: скрыто место остается выделенным для текста. Это не относится к display: none .

Код

Код HTML

Давайте рассмотрим следующий пример, чтобы узнать, как использовать эти свойства CSS на странице HTML.

Код CSS
 

#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 {

отображение: нет;

}

Пример 1

Теперь давайте присоединим файл CSS к HTML и посмотрим, что произойдет с текстом внутри него.

Пояснение

Как видно из результата, у нас есть два блока: правый (контрольный) и левый (тестовый). У них точно такие же элементы, а именно четыре

элементов и один элемент тега .

Слева видно все содержимое, тогда как в правом блоке мы используем видимость: скрыто и отображение: нет для некоторых тегов.

Теперь проанализируем результат.

видимость: скрытый используется для первого div в тестовом блоке (справа). В результате содержимое скрыто , но место для него все еще доступно. Это потому что видимость: скрытый скрывает элемент, но оставляет его в потоке страницы.

Затем мы применяем display: none to

. Вы видите, что содержимое полностью исчезает, а его пространство используется другими элементами (например,
в этом примере).

Как мы уже говорили выше, display: none скрывает элемент и удаляет его из обычного потока страницы.

Вы также можете заметить, что в

мы использовали видимость : скрытый для элемента span .

Пример 2

В этом примере мы увидим, как свойства ведут себя с дочерними узлами. Здесь мы будем использовать встроенные стили CSS.


 <дел>
    

Это родительская область

<дел>

Я ребенок


В приведенном выше фрагменте кода родительская область скрыта, но дочерняя область видна, если мы используем display: none в том же контексте, что и здесь:


 

Это родительская область

<дел>

Я ребенок


Пользователю ничего не показывается, хотя мы попросили отобразить дочерний div (используя display: block ).