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

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

Свойство 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. Я надеюсь, что это прояснит ситуацию

  • Масштабирование шрифтов по ширине контейнера
  • Какие свойства CSS создают контекст стекирования?
  • Изменение размера изображения CSS и сохранение пропорций
  • Почему сброс CSS не использует '*' для покрытия всех элементов?
  • Почему «переполнение: скрытое» очищает поплавок?
  • Удаление нескольких classов (jQuery)
  • Как использовать JSF сгенерированный идентификатор HTML-элемента с двоеточием «:» в селекторах CSS?
  • См. Раздел «Состояние зависания» в инструментах разработчика Chrome.
  • Должен ли я избегать использования! Важно в CSS?
  • Что делает правило CSS «clear: both» do?
  • CSS3 Непрерывная анимация вращения (точно так же, как загрузка солнечных часов)
  • Давайте будем гением компьютера.