English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Свойство Visibility определяет, виден ли элемент или он скрыт.
Вы можете использовать свойство visibility, чтобы определить, виден ли элемент. Это свойство может принимать одно из следующих значений, указанных в таблице:
| Значение | Описание |
|---|---|
| visible | Значение по умолчанию. Этот блок и его содержимое видны. |
| hidden | Этот блок и его содержимое невидимы, но все еще влияют на макет страницы. |
| collapse | Это значение удаляет целую строку или столбец из отображения. Это значение используется для элементов строки, группы строк, столбца и группы столбцов. |
| inherit | Значение свойства видимости должно наследоваться от родительского элемента, то есть принимать то же значение видимости, что и родительский элемент. |
visibility: collapse;, но правила стиля удалят внутренние элементы таблицы, но не повлияют на макет таблицы. Пространство, обычно занимаемое элементами таблицы, будет заполнено последующими элементами того же уровня.
Внимание:Если для других элементов (не для элементов таблицы) установлены правила стиля visibility: collapse;, то их поведение будет таким же, как для hidden.
Свойства CSS display и visibility кажутся одинаковыми, но на самом деле они совершенно разные и часто вызывают путаницу у новых разработчиков Web.
visibility: hidden; скрывает элемент, но он все еще занимает пространство в макете. Если видимость подэлементов скрытого блока установлена в "виден", они будут видимыми.
display: none; отключает отображение и полностью удаляет элемент из документа. Даже если его HTML все еще находится в исходном коде, он не занимает никакого места. Даже если все свойства отображения всех подэлементов установлены в none, отображение будет отключено.
У属性的 visibility есть четыре доступных значения (visible, hidden, collapse и inherit), но наиболее часто используемые значения - visible и hidden.
visibility: visible /* Элемент виден, это значение по умолчанию */ visibility: hidden /* Элемент невидим, но ему все еще сохраняется соответствующее пространство */ visibility: collapse /* Действует только на объекты типа table, может удалять строки или столбцы, но не влияет на布局 таблицы. Если это значение используется на объектах, отличных от table, оно будет отображаться как hidden. */ visibility: inherit /* Наследует значение visibility от родительского элемента. */
У свойства Display много возможных значений, но в данном случае мы рассмотрим только несколько из них: block, none и inline
display: none /* Элемент невидим и не занимает соответствующего места */ display: block /* Отображается как блоковый элемент (в большинстве случаев занимает отдельную строку) */ display: inline /* Отображается как линейный элемент (в большинстве случаев не занимает отдельную строку) */
Как видно из вышеизложенного, хотя свойства Visibility и Display могут скрывать элемент, их различие заключается в том, что visibility: hidden сохраняет пространство для элемента на странице, в то время как display: none表现得 так, как будто элемент удален из страницы.
Кроме того, разница между display: block и display: inline заключается в том, что блоковые элементы занимают отдельную строку на странице, а inline-элементы нет. Некоторые объекты по умолчанию являются блоковыми элементами, а некоторые - inline-элементами. При использовании их нужно быть внимательными, чтобы избежать повторного определения одинаковых свойств.
Хотя свойства Visibility и Display могут скрывать элементы на странице, их различие заключается в том, как они реагируют на нормальный поток документа.
Если вы хотите скрыть элемент, но сохранить его пространство на странице, вы должны использовать visibility: hidden. Если вы хотите скрыть элемент и заполнить пустоту другим содержимым, используйте display: none.