Разница между «Отображение: Нет» и «Видимость: Скрытый» в CSS

В некоторых случаях, когда вы работаете над созданием веб-страниц, вам необходимо «скрыть» определенные области элементов по тем или иным причинам. Конечно, вы можете просто удалить элементы в вопросах из разметки HTML, но что, если вы хотите, чтобы они оставались в коде, а не отображались на экране браузера по какой-либо причине (и мы рассмотрим причины, по которым сделать это в ближайшее время). Чтобы сохранить элемент в своем HTML, но скрыть его для отображения, вы должны обратиться к CSS.

Два наиболее распространенных способа скрыть элемент, который находится в HTML, – использовать свойства CSS для «отображения» или «видимости». На первый взгляд, эти два свойства могут показаться одинаковыми, но каждое из них имеет свои отличия, о которых вам следует знать. Давайте посмотрим на различия между

 дисплей: нет 

а также

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

видимость

Используя пару CSS свойство/значение

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

скрывает элемент от браузера. Однако этот скрытый элемент все еще занимает место в макете. Как будто вы в основном сделали элемент невидимым, но он все еще остается на месте и занимает место, которое он занял бы, если бы его оставили в покое.

Если вы разместите DIV на своей странице и используете CSS, чтобы дать ему размеры, занимающие 100×100 пикселей,

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

свойство заставит DIV не показываться на экране, но текст, следующий за ним, будет действовать так, как будто он все еще там, с учетом расстояния 100×100.

Свойство видимости мы используем не очень часто и, конечно, не сами по себе. Если мы также используем другие свойства CSS, такие как позиционирование, для достижения макета, который мы хотели для определенного элемента, мы могли бы затем использовать видимость, чтобы изначально скрыть этот элемент, только чтобы «включить» его при наведении. Это одно из возможных применений этого свойства, но опять же, это не то, к чему мы обращаемся с какой-либо частотой.

дисплей

В отличие от свойства видимости, которое оставляет элемент в нормальном потоке документов,

 дисплей: нет 

полностью удаляет элемент из документа Он не занимает места, хотя HTML-код для него все еще находится в исходном коде. Это потому, что он действительно удален из потока документов. Для всех намерений и целей предмет пропал. Это может быть хорошо или плохо, в зависимости от ваших намерений. Это также может повредить вашу страницу, если вы неправильно используете это свойство!

Мы часто используем «display: none» при тестировании страницы. Если нам нужно, чтобы область на некоторое время «ушла», чтобы мы могли протестировать другие области страницы, мы можем использовать для этого «display: none». Однако следует помнить, что элемент должен быть возвращен на страницу до фактического запуска этого сайта. Это связано с тем, что элемент, удаленный из потока документов в этом методе, не виден поисковыми системами или программами чтения с экрана, даже если он может оставаться в разметке HTML. В прошлом этот метод использовался в качестве метода «черной шляпы», чтобы попытаться повлиять на рейтинг в поисковых системах, поэтому элементы, которые не отображаются, могут быть красным флажком для Google, чтобы выяснить, почему этот подход используется.

Один из способов, которым мы находим «display: none» полезным, и где мы используем его на живых, рабочих веб-сайтах, – это когда мы создаем адаптивный сайт, который может иметь элементы, которые доступны для одного размера дисплея, но не для других. Вы можете использовать «display: none», чтобы скрыть этот элемент, а затем снова включить его с помощью медиазапросов. Это приемлемое использование «display: none», потому что вы не пытаетесь скрыть что-либо по гнусным причинам, но у вас есть для этого законная необходимость.

Оцените статью
Solutics.ru
Добавить комментарий