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 ).

No related posts.