В чем разница между visibility: hidden и display: none?

display:none удаляет элемент из потока макета.

visibility:hidden скрывает это, но оставляет пространство.

display:none означает, что рассматриваемый тег вообще не будет отображаться на странице (хотя вы все равно можете взаимодействовать с ним через dom). Для него не будет места между другими тегами.

visibility:hidden означает, что, в отличие от display:none, тег не отображается, но для него выделяется место на странице. Тег отображается, его просто нет на странице.

Например:

test | <span style = "[style-tag-value]">Appropriate style in this tag</span> | test

Замена [style-tag-value] на display:none приводит к:

test |   | test

Замена [style-tag-value] на visibility:hidden приводит к:

test |                        | test

display: none полностью удаляет элемент со страницы, и страница строится так, как если бы элемента вообще не было.

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

Это может иметь или не иметь большого значения в зависимости от того, что вы делаете.

Это не синонимы - display: none удаляет элемент из потока страницы, а остальная часть страницы течет так, как если бы его там не было.

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

С visibility:hidden объект по-прежнему занимает вертикальную высоту на странице. В display:none он полностью удален. Если у вас есть текст под изображением и вы используете display:none, этот текст сместится вверх, чтобы заполнить пространство, на котором было изображение. Если вы сделаете видимость: скрыто, текст останется в том же месте.

display:none скроет элемент и свернет занимаемое пространство, тогда как visibility:hidden скроет элемент и сохранит пространство элементов. display: none также влияет на некоторые свойства, доступные из javascript в более старых версиях IE и Safari.

Это не синонимы.

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

visibility:hidden оставляет элемент в обычном потоке страницы, так что он все еще занимает место.

Представьте, что вы стоите в очереди на прогулку в парке развлечений, а кто-то в очереди становится настолько шумным, что охрана срывает их с очереди. Затем все в очереди переместятся на одну позицию вперед, чтобы заполнить теперь пустой слот. Это как display:none.

Сравните это с аналогичной ситуацией, но когда кто-то перед вами надевает плащ-невидимку. При просмотре строки будет казаться, что есть пустое пространство, но люди не могут заполнить это пустое пространство, потому что кто-то все еще там. Это как visibility:hidden.

Стоит добавить одну вещь, хотя об этом не спрашивали, - это то, что есть третий вариант сделать объект полностью прозрачным. Рассматривать:

1st <a href = "http://example.com" style = "display: none;">unseen</a> link.<br />
2nd <a href = "http://example.com" style = "visibility: hidden;">unseen</a> link.<br />
3rd <a href = "http://example.com" style = "opacity: 0;">unseen</a> link.

(Не забудьте нажать кнопку «Выполнить фрагмент кода» выше, чтобы увидеть результат.)

На разницу между 1 и 2 уже указывалось (а именно, 2 все еще занимает место). Однако есть разница между 2 и 3: в случае 3 мышь по-прежнему переключается на руку при наведении курсора на ссылку, и пользователь по-прежнему может щелкнуть ссылку, а события Javascript по-прежнему будут запускаться по ссылке. Обычно это поведение нет, которое вы хотите (но, может быть, иногда это так?).

Другое отличие состоит в том, что если вы выделите текст, а затем скопируете / вставите его как обычный текст, вы получите следующее:

1st link.
2nd  link.
3rd unseen link.

В случае 3 текст копируется. Может быть, это будет полезно для водяных знаков или если вы хотите скрыть уведомление об авторских правах, которое появится, если пользователь по неосторожности скопирует / вставит ваш контент?

Если для свойства видимости установлено значение "hidden", браузер все равно будет занимать место на странице для содержимого, даже если оно невидимо. Но когда мы устанавливаем объект в "display:none", браузер не выделяет место на странице для его содержимого.

Пример:

<div style = "display:none">
Content not display on screen and even space not taken.
</div>

<div style = "visibility:hidden">
Content not display on screen but it will take space on screen.
</div>

Посмотреть детали

В дополнение ко всем другим ответам для IE8 есть важное отличие: если вы используете display:none и пытаетесь получить ширину или высоту элемента, IE8 возвращает 0 (в то время как другие браузеры возвращают фактические размеры). IE8 возвращает правильную ширину или высоту только для visibility:hidden.

visibility:hidden сохраняет пространство; display:none - нет.

visibility:hidden сохранит элемент на странице и займет это пространство, но не будет отображаться пользователю.

display:none не будет доступен на странице и не займет места.

Когда дело доходит до дочерних узлов, существует большая разница. Например: если у вас есть родительский div и вложенный дочерний div. Итак, если вы напишете так:

<div id = "parent" style = "display:none;">
    <div id = "child" style = "display:block;"></div>
</div>

В этом случае ни один из div не будет виден. Но если вы напишете так:

<div id = "parent" style = "visibility:hidden;">
    <div id = "child" style = "visibility:visible;"></div>
</div>

Тогда будет виден дочерний div, тогда как родительский div не будет отображаться.

Еще одно отличие состоит в том, что visibility:hidden работает в действительно старых браузерах, а display:none - нет:

https://www.w3schools.com/cssref/pr_class_visibility.asp

https://www.w3schools.com/cssref/pr_class_display.asp

display: none; 

Он не будет доступен на странице и не займет места.

visibility: hidden; 

он скрывает элемент, но по-прежнему занимает то же место, что и раньше. Элемент будет скрыт, но все равно повлияет на макет.

visibility: hidden сохраняет пространство, тогда как display: none не сохраняет его.

Отображать нет Пример: https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none

Пример скрытой видимости: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

display:none; не будет отображать элемент и не будет выделять пространство для элемента на странице, тогда как visibility:hidden; не будет отображать элемент на странице, но будет выделять пространство на странице. В обоих случаях мы можем получить доступ к элементу в DOM. Чтобы лучше понять это, посмотрите следующий код: отображение: нет vs видимость: скрыто

Разница выходит за рамки стиля и отражается в поведении элементов при манипулировании с помощью JavaScript.

Эффекты и побочные эффекты display: none:

• целевой элемент выводится из документооборота (не влияет на расположение других элементов);
• затронуты все потомки (тоже не отображаются и не могут «вырваться» из этого наследования);
• невозможно выполнить измерения ни для целевого элемента, ни для его потомков - они вообще не отображаются, поэтому их clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(), все возвращают 0.

Эффекты и побочные эффекты visibility: hidden:

• целевой элемент скрыт от просмотра, но не выводится из потока и влияет на макет, занимая его обычное пространство;
• innerText (но не innerHTML) целевого элемента и потомков возвращает пустую строку.

Здесь много подробных ответов, но я подумал, что должен добавить это, чтобы решить проблему доступности, поскольку есть последствия.

display: none; и visibility: hidden; могут быть прочитаны не всеми программами чтения с экрана. Помните, что будут испытывать пользователи с ослабленным зрением.

Вопрос также касается синонимов. text-indent: -9999px; - это еще один, который примерно эквивалентен. Важным отличием text-indent является то, что он часто читается программами чтения с экрана. Это может быть немного неприятно, поскольку пользователи все еще могут переходить по ссылке.

Что касается доступности, то сегодня я использую комбинацию стилей, чтобы скрыть элемент, оставаясь видимым для программ чтения с экрана.

{
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

Отличной практикой является создание ссылки «Перейти к содержимому» на привязку к основной части содержимого. Пользователи с ослабленным зрением, вероятно, не хотят прослушивать ваше полное дерево навигации на каждой странице. Сделайте ссылку визуально скрытой. Пользователи могут просто нажать вкладку, чтобы получить доступ к ссылке.

Подробнее о специальных возможностях и скрытом содержимом см.

• https://webaim.org/techniques/css/invisiblecontent/
• https://webaim.org/techniques/skipnav/

дисплей: нет

Он удалит элемент из обычного потока страницы, позволяя другим элементам заполниться.

Элемент вообще не появится на странице, но мы все равно можем взаимодействовать с ним через DOM. Для него не будет места между остальными элементами.

видимость: скрыто

Он оставит элемент в обычном потоке страницы, который все еще занимает место.

Элемент не отображается, и для него выделяется место на странице.

Некоторые другие способы скрыть элементы

Используйте z-индекс

#element {
   z-index: -11111;
}

Переместить элемент со страницы

#element {
   position: absolute; 
   top: -9999em;
   left: -9999em;
}

Интересная информация о свойствах visibility: hidden и display: none

visibility: hidden и display: none будут одинаково эффективны, поскольку они оба повторно запускают макет, окраску и композит. Однако opacity: 0 по функциональности эквивалентен visibility: hidden и не запускает повторно этап макета.

И свойство CSS-transition - тоже важная вещь, о которой нам нужно позаботиться. Потому что переключение с visibility: hidden на visibility: visible позволяет использовать CSS-переходы, а переключение с display: none на display: block - нет. visibility: hidden имеет дополнительное преимущество в том, что не захватывает события JavaScript, тогда как opacity: 0 захватывает события.