Содержание
Свойства CSS для «отображения» и «видимости» позволяют скрывать элементы в HTML-коде страницы, но различаются по своему значению для ее внешнего вида и функции. Видимость: скрыто скрывает тег, но все равно занимает место и влияет на страницу. Напротив, дисплей: нет удаляет тег и его эффекты для всех намерений и целей, но тег остается видимым в исходном коде. Оба подхода отличаются от простого удаления элемента (ов) в вопросах из разметки HTML. Давайте посмотрим на два более подробно.
видимость
С помощью видимость: скрытая скрывает элемент от браузера; однако этот скрытый элемент все еще живет в исходном коде. В основном, видимость: скрытая делает элемент невидимым для браузера, но он все еще остается на месте и занимает то же место, если вы его не скрывали.
Например, если вы разместите DIV на вашей странице и использовать CSS, чтобы дать ему размеры 100 на 100 пикселей, видимость: скрытая собственность скроет DIV, но текст, следующий за ним, будет действовать так, как будто он все еще там, при соблюдении этого интервала 100 на 100.
Свойство видимости используется не очень часто и, конечно, не само по себе. Если вы также используете другие свойства CSS, такие как позиционирование для создания макета, вы можете использовать видимость скрыть этот элемент изначально, только чтобы показать его при наведении. Это только одно возможное использование этого свойства, но опять же, его использование не часто.
дисплей
В отличие от свойства видимости, которое оставляет элемент в нормальном потоке документов, дисплей: нет по существу удаляет элемент полностью из документа. Присоединенный элемент не занимает места, даже если он все еще находится в исходном коде. Что касается браузера, предмет пропал. Это может быть полезно; это также может повредить вашу страницу при неправильном использовании.
Тестирование страницы является распространенным дисплей: нет. Если вам нужно немного уйти, пока вы тестируете другие области страницы, дисплей: нет выполняет свою работу
Если вы используете Tage для тестирования, не забудьте удалить дисплей: нет тег до запуска сайта. Поисковые системы и программы чтения с экрана не видят элементы, помеченные таким образом, даже если они остаются в разметке HTML. В прошлом это был метод «черной шляпы», влияющий на рейтинг в поисковых системах, поэтому элементы, которые не отображаются, теперь являются красными флагами для Google и других поисковых систем.
Дисплей: нет находит подходящее применение в реальных сценариях, хотя. Например, если вы создаете адаптивный сайт, вы можете включить элементы, которые доступны для одного размера экрана, но не для других. Вы можете использовать дисплей: нет чтобы скрыть этот элемент, а затем снова включить его с помощью медиа-запросов. Это приемлемое использование дисплей: нет потому что вы не пытаетесь скрыть что-либо по гнусным причинам, но у вас есть для этого законная необходимость.
Для получения дополнительной информации об использовании CSS, проверьте шпаргалку Lifewire.
