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

Ответ 1

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

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

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

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

Ответ 2

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

Ответ 3

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

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

display: none;

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

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

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

Ответ 4

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

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