Свойства CSS: отображение и видимость

В чем разница между свойствами отображения и видимости?

visibilityСвойство только говорит браузеру , нужно ли отображать элемент или нет. Он либо видимый ( visible- вы его видите), либо невидимый ( hidden- вы его не видите).

displayСвойство сообщает браузеру , как рисовать и показать элемент, если вообще - должен ли он будет отображаться в качестве inlineэлемента (то есть она течет с текстом и другими строчными элементами) или block-уровне элемента (т.е. имеет ширину и высоту свойства, вы можете установить, это сплавной, и т.д.), или inline-block(т.е. он действует как блок коробки , но укладывают рядный , а) и некоторые другие ( list-item, table, table-row, table-cell, flexи т.д.).

Когда вы устанавливаете элемент, display: blockно также устанавливаете visibility: hidden, браузер по-прежнему рассматривает его как элемент блока, за исключением того, что вы его просто не видите. Это похоже на то, как вы складываете красную коробку поверх невидимой коробки: красная коробка выглядит так, как будто она парит в воздухе, тогда как на самом деле она находится наверху физической коробки, которую вы не видите.

Другими словами, это означает, что элементы, у displayкоторых нет none, по-прежнему будут влиять на поток элементов на странице, независимо от того, видны они или нет. Блоки, окружающие элемент с, display: noneбудут вести себя так, как будто этого элемента никогда не было (хотя он остается в DOM).

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

• элемент не будет окрашен и не будет получать события щелчка / касания, но место, которое он занимает, все еще занято
• поскольку он все еще используется для макета, вы можете измерить его, не будучи видимым
• изменение содержимого по-прежнему будет стоить времени на перекомпоновку / верстку страницы
• видимость наследуется, поэтому вы можете сделать дочерних детей видимыми, дав им видимость: видимые;

дисплей: нет;

• заставит элемент не участвовать в потоке / макете
• может (в зависимости от используемого браузера) убивать Flash-ролики и фреймы (которые будут перезапущены / перезагружены при повторном показе), хотя вы можете предотвратить это с помощью фреймов
• элемент не займет места. для целей макета это как будто не существует
• заставит некоторые браузеры / устройства (например, iPad) напрямую забирать память, используемую этим элементом, вызывая небольшие затруднения, если вы переключаетесь между отсутствием и другим значением во время анимации

дополнительные примечания:

• изображения в скрытом содержимом: во всех популярных браузерах изображения по-прежнему загружаются, даже если они находятся внутри любого элемента с видимостью: скрыто; или дисплей: нет;
• шрифты в скрытом содержимом: браузеры webkit (Chrome / Safari) могут задерживать загрузку пользовательских шрифтов, которые используются только в скрытых элементах, в том числе посредством видимости или отображения. Это может привести к измерению элементов, которые все еще используют резервный шрифт, пока пользовательский шрифт не будет загружен.

display: none удаляет элемент из потока html, тогда как visibility: hidden - нет.

дисплей: нет; удалит визуальный стиль / физическое пространство элементов DOM из DOM, тогда как visibility: hidden; не удалит элемент, а просто скроет его. Таким образом, div, занимающий 300 пикселей по вертикали в вашей модели DOM, ВСЕГДА будет занимать 300 пикселей по вертикали, если установлен в visibility: hidden; но когда установлено отображение: нет; его визуальные стили и пространство, которое он занимает, скрываются, а затем пространство «освобождается» из-за отсутствия лучшего слова.

[EDIT] - Это было некоторое время назад, когда я написал выше, и был ли я недостаточно осведомлен или у меня был плохой день, я не знаю, но на самом деле элемент НИКОГДА не удаляется из иерархии DOM. Все стили отображения на уровне блока полностью «скрыты» при использовании display: none, тогда как с visibility: hidden; сам элемент скрыт, но по-прежнему занимает визуальное пространство в DOM. Надеюсь, это проясняет ситуацию