@KennyTM: предполагается, что OP конкретно просит сравнить соответствующие значения каждого свойства.
BoltClock
Ответы:
111
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).
.. не дисплей имеет какое-то отношение к DOM? например ... если да display: none;, то этот элемент удаляется из DOM? или я совсем запуталась?
Христо
3
@Hristo: На самом деле это не так. Вы никогда не сможете повлиять на положение или присутствие элемента в DOM только с помощью CSS.
BoltClock
@BoltClock ... да, ты прав. Я понял, что вы никогда не можете извлечь элемент из DOM, а только повлиять на то, как он отображается в отношении DOM. это звучит точнее?
Христо
Следует отметить одну важную вещь: используя метод jQuery hide (), который внутренне устанавливает для display значение none, вы не можете получить позицию этого элемента. Используя видимость, вы можете это сделать.
p0rsche
21
видимость: скрыта;
элемент не будет окрашен и не будет получать события щелчка / касания, но место, которое он занимает, все еще занято
поскольку он все еще используется для макета, вы можете измерить его, не будучи видимым
изменение содержимого по-прежнему будет стоить времени на перекомпоновку / верстку страницы
видимость наследуется, поэтому вы можете сделать дочерних детей видимыми, дав им видимость: видимые;
дисплей: нет;
заставит элемент не участвовать в потоке / макете
может (в зависимости от используемого браузера) убивать Flash-ролики и фреймы (которые будут перезапущены / перезагружены при повторном показе), хотя вы можете предотвратить это с помощью фреймов
элемент не займет места. для целей макета это как будто не существует
заставит некоторые браузеры / устройства (например, iPad) напрямую забирать память, используемую этим элементом, вызывая небольшие затруднения, если вы переключаетесь между отсутствием и другим значением во время анимации
дополнительные примечания:
изображения в скрытом содержимом: во всех популярных браузерах изображения по-прежнему загружаются, даже если они находятся внутри любого элемента с видимостью: скрыто; или дисплей: нет;
шрифты в скрытом содержимом: браузеры webkit (Chrome / Safari) могут задерживать загрузку пользовательских шрифтов, которые используются только в скрытых элементах, в том числе посредством видимости или отображения. Это может привести к измерению элементов, которые все еще используют резервный шрифт, пока пользовательский шрифт не будет загружен.
дисплей: нет; удалит визуальный стиль / физическое пространство элементов DOM из DOM, тогда как visibility: hidden; не удалит элемент, а просто скроет его. Таким образом, div, занимающий 300 пикселей по вертикали в вашей модели DOM, ВСЕГДА будет занимать 300 пикселей по вертикали, если установлен в visibility: hidden; но когда установлено отображение: нет; его визуальные стили и пространство, которое он занимает, скрываются, а затем пространство «освобождается» из-за отсутствия лучшего слова.
[EDIT] - Это было некоторое время назад, когда я написал выше, и был ли я недостаточно осведомлен или у меня был плохой день, я не знаю, но на самом деле элемент НИКОГДА не удаляется из иерархии DOM. Все стили отображения на уровне блока полностью «скрыты» при использовании display: none, тогда как с visibility: hidden; сам элемент скрыт, но по-прежнему занимает визуальное пространство в DOM. Надеюсь, это проясняет ситуацию
Ответы:
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).источник
display: none;
, то этот элемент удаляется из DOM? или я совсем запуталась?видимость: скрыта;
дисплей: нет;
дополнительные примечания:
источник
display: none удаляет элемент из потока html, тогда как visibility: hidden - нет.
источник
дисплей: нет; удалит визуальный стиль / физическое пространство элементов DOM из DOM, тогда как visibility: hidden; не удалит элемент, а просто скроет его. Таким образом, div, занимающий 300 пикселей по вертикали в вашей модели DOM, ВСЕГДА будет занимать 300 пикселей по вертикали, если установлен в visibility: hidden; но когда установлено отображение: нет; его визуальные стили и пространство, которое он занимает, скрываются, а затем пространство «освобождается» из-за отсутствия лучшего слова.
[EDIT] - Это было некоторое время назад, когда я написал выше, и был ли я недостаточно осведомлен или у меня был плохой день, я не знаю, но на самом деле элемент НИКОГДА не удаляется из иерархии DOM. Все стили отображения на уровне блока полностью «скрыты» при использовании display: none, тогда как с visibility: hidden; сам элемент скрыт, но по-прежнему занимает визуальное пространство в DOM. Надеюсь, это проясняет ситуацию
источник
display: none
будет не удалить элемент из DOM. Элемент все еще там, он просто не отображается .