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

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

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

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

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

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

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

display: none;

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

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

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

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

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

[РЕДАКТИРОВАТЬ] – Некоторое время назад я написал выше, и не был ли я недостаточно осведомлен или плохой день, я не знаю, но реальность такова, что элемент НИКОГДА не удаляется из иерархии DOM. При использовании дисплея все стили отображения уровня блока полностью «скрыты»: нет, тогда как с видимостью: скрытый; сам элемент скрыт, но он все еще занимает визуальное пространство в DOM. Я надеюсь, что это прояснит ситуацию