В чем разница между видимостью: скрытой и отображаемой: нет?

visibility:hidden правил CSS visibility:hidden и display:none приводит к тому, что элемент не отображается. Являются ли эти синонимы?

17 Solutions collect form web for “В чем разница между видимостью: скрытой и отображаемой: нет?”

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

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

Например:

 test | Appropriate style in this tag | test 

Замена [style-tag-value] на display:none :

 test | | test 

Замена [style-tag-value] с visibility:hidden результаты:

 test |                       | test 

Они не синонимы.

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

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

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

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

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

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

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

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

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

  

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

  

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

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

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

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

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

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

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

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

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

Пример:

 
Content not display on screen and even space not taken.
Content not display on screen but it will take space on screen.

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

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

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

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

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

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

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

Еще одно отличие заключается в том, что 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 в обоих случаях. Чтобы лучше понять это, посмотрите следующий код: display: none vs visibility: hidden

Interesting Posts

Не удается получить доступ к определенным веб-сайтам – сбросить маршрутизатор, какие-либо идеи?

Установка Java на Ubuntu?

Где Chrome хранит файл cookie?

Как скопировать файлы с локальной машины на удаленную виртуальную машину?

PowerShell Получить список разделяемых папок

Настройки отправки электронной почты с localhost для PHP-кода в Windows Vista

Что ограничивает машины Windows 7 x64 до <= 192 ГБ оперативной памяти?

Моделирование сетевого соединения с низкой пропускной способностью и высокой задержкой в ​​Linux

Как восстановить файлы из жесткого диска linux ext4

Как настроить близость процессора к OS X?

Paginate Rows в столбцы в Excel

Outlook 2007 переустановить и импортировать из резервной копии, теперь у меня есть дубликаты всего

Virus / Malware: окно проводника со странным пользователем, зарегистрированным в Hotmail

Как настроить DNS-серверы на Raspberry Pi?

OEM Office 2010 без носителя – как переустановить?

Давайте будем гением компьютера.