Свойства CSS display и visibility: как скрыть элемент CSS или элемент HTML?
Свойства display и visibility используются, чтобы вывести или скрыть элемент HTML или CSS. Но тогда какая между ними разница? Чтобы понять это, посмотрите на приведенный ниже рисунок, здесь я использовал три элемента div :
Мы используем три элемента div , которые показаны в разделе 1 ( с левой стороны ). Изначально все элементы div выводятся без применения свойств display или visibility .
Обновлено: 2021-10-12 14:57:55 Вадим Дворников автор материала
Посмотреть онлайн демо-версию и код
Во второй части рисунка отображаются только div 1 и div 3 . Для div 2 задано visibility: hidden , но мы все равно видим пространство, которое занимает этот элемент.
Посмотреть онлайн демо-версию и код
В третьем разделе также отображаются только div 1 и div 3 , в то время как div 2 скрыт с помощью свойства HTML display none . Можно увидеть разницу: div 3 смещается вверх и для div 2 больше не отводится пространство.
Посмотреть онлайн демо-версию и код
Синтаксис свойства CSS visibility
Вот, как использовать свойство CSS visibility :
visibility: hidden;
Значение по умолчанию для свойства CSS visibility — visible . Также можно использовать:
visibility: collapse;
Данное значение используется в HTML-таблицах .
Синтаксис свойства CSS display
display: none;
Это позволяет скрыть элемент, для которого задано значение данного свойства. Именно его я применил для раздела 3 в приведенном выше примере.
Свойство HTML display также используется, чтобы изменить поведение строчных или блочных элементов:
display: inline;
Этот код задает для блочного элемента поведение строчного. Например, div представляет собой блочный элемент. Применив к нему display: inline , мы задаем для него поведение строчного элемента:
display: block;
Значение block делает противоположное. Например, элемент span является строчным. Если мы применим к нему display: block , он будет вести себя как блочный элемент.
Пример применения свойства display для отображения / скрытия меню
-
, элементы списка и гиперссылки. Ссылки представляют собой пункты меню.
Для разработки этого меню использовался ряд других свойств CSS . Свойство display изначально задано не было. Это означает, что меню будет отображаться.
При клике по ссылке скрыть меню для события клика используется код JQuery , чтобы применить свойство display: none к родительскому элементу div :
Посмотреть онлайн демо-версию и код
Если после этого вы нажмете на ссылку показать меню, код jQuery добавит значение display: initial . Это сделает меню видимым, а ссылки сместятся вниз.
Демо-версия меню с использованием свойства visibility
Я использую тот же пример, что и выше, но на этот раз применю свойство CSS visibility , чтобы показать и скрыть меню. Разница заключается в используемом коде jQuery :
visibility: hidden
При нажатии на ссылку скрыть меню, меню скрывается. При клике по ссылке показать меню, добавляется свойство visibility: visible , и меню снова отображается:
Посмотреть онлайн демо-версию и код
В этом примере можно увидеть разницу. Когда нажимается ссылка скрыть меню, меню исчезает. При клике по ссылке показать меню, оно вновь становится видимым. Но ссылки при этом остаются на своих местах и не смещаются ( в отличие от HTML display ).
Пример использования свойства CSS visibility для HTML-таблицы
В следующем примере мы создадим HTML-таблицу с помощью фреймворка Bootstrap . Таблица содержит пять строк, которые первоначально отображаются. На данном этапе таблица выглядит следующим образом:
Посмотреть онлайн демо-версию и код
Для строк таблицы использованы разные классы, чтобы задать их стили. Например, danger , active , warning и т.д. Строки таблицы пронумерованы от 1 до 5 ( первый столбец слева ).
Теперь я использую свойство visibility для второй строки, чтобы скрыть ее. Это делается следующим образом:
visibility: collapse;
Таким образом значение collapse также используется для элементов таблицы. Оно применяется для удаления строки, при этом структура таблицы не изменяется. Посмотрите на приведенный ниже рисунок и на код демо-версии:
Посмотреть онлайн демо-версию и код
Вторая строка не видна, но структура таблицы остается неизменной. Если вы используете значение collapse для любых других элементов, оно будет работать, как значение hidden .
Применение свойства CSS display к таблице
Теперь тот же самый пример, за исключением того, что я буду использовать свойство HTML display , чтобы скрыть строку в таблице:
Посмотреть онлайн демо-версию и код
Вторая строка исчезла, а третья строка перемещается вверх, чтобы занять ее место.
Использование display для строчных элементов
Свойство CSS display также используется для изменения поведения строчных и блочных элементов.
Напомню, что блочные элементы занимают все доступное им пространство и начинаются с новой строки. Например, абзацы или блоки div — это блочные элементы.
Строчные элементы занимают только необходимое для отображения пространство и не начинаются с новой строки. В качестве примеров строчных элементов можно привести span , тег ссылки и т.д.
Свойство HTML display позволяет изменять поведение строчных и блочных элементов.
Чтобы изменить поведение блочного элемента на поведение строчного:
display: inline;
Чтобы изменить поведение строчного элемента на поведение блочного:
display: block;
В следующем примере поведение элемента span изменяется на поведение блочного элемента. А поведение абзаца с помощью свойства CSS display изменяется на поведение строчного элемента.
Чтобы понять, в чем заключается разница, сначала посмотрите на приведенный ниже рисунок и исходный код, в котором свойство HTML display еще не применено:
Посмотреть онлайн демо-версию и код
На странице демо-версии отображен родительский div , а внутри него span и абзац. Изначально их поведение является стандартным для этих элементов:
- Родительский div очерчен черной рамкой и занимает всю доступную ширину;
- span очерчен синей рамкой, внутри div он занимает только необходимое для отображения пространство и начинается с той же самой строки;
- Абзац, который очерчен красной рамкой, также занимает все доступное пространство и начинается с новой строки.
Теперь с помощью HTML display block я изменю поведение span на поведение блочного элемента, а поведение абзаца на поведение строчного. Родительский div остается без изменений. Смотрите результат и демо-версию:
Посмотреть онлайн демо-версию и код
span начинается с новой строки и границы абзаца заканчивается там, где заканчивается его текст. Он не занимает всю доступную ширину, как div или span .
Display none css как отменить
Здесь могла бы быть ваша реклама
Покинул форум
Сообщений всего: 4574
Дата рег-ции: Июль 2006
Откуда: Israel
Помог: 3 раз(а)
Секрет
Теперь, когда вы уже наверняка второпях отправили свой запрос,
я расскажу вам простой секрет, который сэкономит вам уйму ожиданий,
даже если первый ответ по теме последуем сразу же.
Само собой я знаю что ответят мне тут же, и если я посмотрю
на сообщения на форуме, то пойму что в общем то я и не ошибаюсь.
Но еще я точно замечу, что очень мало тем, в которых всего два ответа :
вопрос автора и еще два сообщение вида Ответ + Спасибо
После этого приходится начинать уточнять этим неграмотным что мне надо.
Они что, сами читать не умеют? А уточнять приходится.
И иногда пока они переварят то что я им скажу проходит и не одна ночь..
Уверен что если бы я им сказал что у меня есть
фиолетовый квадрат, и нужно превратить его в синий треугольник
и я пытался взять кисточку, макнуть в банку и поводить ей по квадрату
но почему то кисточка не принимала цвет краски в банке,
то на мой вопрос — где взять правильные банки мне бы ответили гораздо быстрее
предложив её открыть, а не тратить еще стольник на жестянку.
Поэтому с тех пор я строю свои вопросы по проверенной давным давно схеме:
Что есть
Что нужно получить
Как я пытался
Почему или что у меня не получилось.
На последок как оно происходит на форумах
Цитата:
Новичок: Подскажите пожалуста самый крепкий сорт дерева! Весь инет перерыл, поиском пользовался!
Старожил: Объясни, зачем тебе понадобилось дерево? Сейчас оно в строительстве практически не используется.
Новичок: Я небоскрёб собираюсь строить. Хочу узнать, из какого дерева делать перекрытия между этажами!
Старожил: Какое дерево? Ты вообще соображаешь, что говоришь?
Новичок: Чем мне нравиться этот форум — из двух ответов ниодного конкретного. Одни вопросы неподелу!
Старожил: Не нравится — тебя здесь никто не держит. Но если ты не соображаешь, что из дерева небоскрёбы не строят, то лучше бы тебе сначала школу закончить.
Новичок: Не знаите — лучше молчите! У меня дедушка в деревянном доме живёт! У НЕГО НИЧЕГО НЕ ЛОМАЕТСЯ.
Но у него дом из сосны, а я понимаю, что для небоскрёба нужно дерево прочнее! Поэтому и спрашиваю. А от вас нормального ответа недождёшся.
Прохожий: Самое крепкое дерево — дуб. Вот тебе технология вымачивания дуба в солёной воде, она придаёт дубу особую прочность:
Новичок: Спасибо, братан! То что нужно.
Отредактировано модератором: Uchkuma, 26 Апреля, 2011 — 10:21:12
Курсы javascript
Все данные скрыты «display: none». Как не скрывать (убрать «display: none») последний год и месяц?
14.08.2015, 18:33
Регистрация: 27.05.2010
Сообщений: 33,031
Untitled window.onload = function()
14.08.2015, 18:40
Регистрация: 15.01.2015
Сообщений: 622
document.querySelectorAll('.spoiler>div')[0].style.display = 'none'; document.querySelectorAll('.spoiler>div')[1].style.display = 'none';
Скрытие текста свойством display:none и последствия для SEO
Если после полной загрузки страницы я с помощью скрипта JS (просто вывожу свойство display:none) скрываю блок с описанием (чтобы полотно не занимало полстраницы), содержимое внутри такого блока видимо поисковым роботам гугла?
Ответ
Да, такое содержимое Google увидит и проиндексирует. Скорее всего данное действие Вы планируете реализовать для мобильной версии страницы. Но, сразу возникает несколько моментов, которые стоит учесть:
- Скрытый контент имеет значительно меньшее влияние на ранжирование, что может негативно сказаться на продвижении в эпоху Mobile-First Indexing.
- В случае отсутствия функционала для просмотра пользователям полного описания, возникает ситуация при которой могут быть нарушены рекомендации Google для веб-мастеров.
- Возможно значительное ухудшения показателя CLS (Cumulative Layout Shift – совокупное смещение макета). Из описанной механики реализации свойство display:none будет выведено после отображения блока на странице, что повлечет за собой смещение содержимого страницы.
В целом, ничего плохого в попытке уменьшить размер отображаемого блока с описанием нет, рекомендуем:
- Скрыть блок с описанием частично, предварительно задав для блока размеры с помощью CSS медиа запросов для различных устройств.
- Добавить кнопку “читать полностью” для возможности просмотра полного содержимого.
- Предусмотреть полное отображение текстового блока для пользователей с отключенным JS.
Хотите получить ответ на свой вопрос? Задайте его нам через телеграм-бота!↓
Подписаться на рассылку
- Сайт в кэше поисковиков отображается без css стилей: причины и последствия По какой причине сайт в кэше поисковиков отображается без css стилей? И является ли это ошибкой? Ответ Если стили не закрыты для индексации роботами, тогда.
- Важна ли валидность HTML кода для ранжирования сайта? Насколько валидность HTML кода влияет на ранжирование? И в частности интересует такой момент: если на сайте весь текст обернут в и нет ни.
- Какие html теги нужно обязательно использовать в коде сайта с точки зрения SEO специалиста? Нужно обращать внимание на семантическую вёрстку сайта или вариант «всё поправить через css» работает? Какие теги обязательно использовать и как это повлияет на ранжирование? Ответ.
- Нужно ли закрывать от индексации файлы json? Нужно ли в wordpress закрывать от индексации файлы json в robots.txt? Или они нужны для корректного видение страницы поисковиками? Ответ Файлы JSON стоит закрывать от.
- Как Google обрабатывает ссылки в теге На сайте ссылки на корзину «купить», «купить в кредит», «купить вместе» и т.д. оформлены тегом . Так же оформлены и ссылки «читать больше», «подробнее». Поисковик.
Работу в сфере IT начинал с должности контент-менеджера. Уже при создании своих личных проектов постепенно узнавал, что такое SEO, увлекло. Вдохновляюсь сложными и интересными задачами.
Мои увлечения: велоспорт и книги.
Девиз: «Другой жизни не будет!»