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

Question

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

Answer 1

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

Answer 2

Они не являются синонимами.

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

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

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

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

Answer 3

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

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.

В этом случае вы получите:

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

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

Answer 4

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

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

Answer 5

Существует большая разница, когда речь идет о дочерних узлах. Например: если у вас есть родительский 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 не будет показан.

Answer 6

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

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

Answer 7

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

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

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

Answer 8

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

Answer 9

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

Answer 10

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