Скрыть html: Как скрыть элемент в html

основные способы — учебник CSS

В CSS существует несколько способов скрыть элемент. При этом скрытие может быть как полным, так и чисто визуальным. Разберем по порядку каждый вариант.

Скрытие элемента с помощью opacity: 0

Если быть точным, свойство opacity не скрывает элемент, а лишь определяет его степень прозрачности. Значение 1 означает полную непрозрачность объекта, а значение 0, соответственно, приводит к полной прозрачности, в результате чего элемент перестает быть виден для посетителя. Последняя часть предложения важна: элемент будет скрыт лишь визуально, но при этом он будет занимать свое место на странице, влиять на положение других элементов, и с ним можно будет взаимодействовать (к примеру, он станет непрозрачным при наведении мыши, если определить соответствующий стиль для состояния :hover). Скрин-ридеры также будут видеть данный элемент.

Преимуществом свойства opacity является его совместимость с transition. Это значит, что можно заставить элемент изменять свою прозрачность плавно, а не рывком. Тем самым можно создать красивое появление элемента.

Скрытие элемента с помощью visibility: hidden

В отличие от свойства прозрачности, свойство visibility специально предназначено для визуального скрытия элементов. Значение hidden скрывает элемент, а значение visible — показывает. Как и в случае с opacity, элемент продолжает занимать свое место на странице, однако взаимодействовать с элементом, скрытым с помощью visibility: hidden, нельзя. Скрин-ридеры не видят такой элемент.

Свойство visibility не реагирует на свойство transition, а это означает, что изменение значения с hidden на visible (либо наоборот) будет происходить мгновенно.

На практике для временного скрытия элементов часто используется два свойства сразу — visibility и opacity (в одном из практических уроков мы уже показывали этот прием). При этом убивается сразу несколько зайцев: с помощью visibility элемент скрывается как положено (в т. ч. от скрин-ридеров), а с помощью opacity обеспечивается плавное появление элемента в необходимый момент.

Скрытие элемента с помощью display: none

Свойство display со значением none стоит использовать в том случае, если вам нужно полностью скрыть элемент. Такой объект (и все его дочерние элементы) не только перестает быть виден посетителю и скрин-ридеру, но и не занимает места на странице и не влияет на расположение других элементов. Всё выглядит так, словно элемента и нет. Естественно, взаимодействовать с элементом, который скрыт данным образом, тоже невозможно.

Как и в случае со свойством visibility, свойство display не поддерживает плавные переходы transition.

Скрытие элемента с помощью position: absolute

Еще один способ скрыть элемент исключительно визуально — задать ему абсолютное позиционирование, выдернув из общего потока документа, и затем переместить далеко за пределы видимой области путем установки больших отрицательных значений для свойств top и left. Например:

div {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

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

Далее в учебнике: CSS Grid Layout — будущее уже здесь.

html — Как скрыть элемент на телефоне, а на пк оставить?

У меня есть элемент на странице, который должен отображаться только на компьютерах.

Как мне это сделать? Можно ли это реализовать с помощью css @media?

• html
• css

В Вашем случае Вы можете использовать, к примеру, медиа-запрос и указывать в нем максимальную ширину экрана (в пикселях или, лучше всего, в относительных единицах, типа em), на которой указанный Вами элемент будет скрываться либо свойством display: none;, либо visibility: hidden;, в зависимости от того, какого эффекта Вам нужно добиться при скрытии элемента.

Размер экрана, который Вы будете считать уже компьютерным, определите сами, но обычно, это минимум

Это может выглядеть примерно так:

.element {
    display: block;
}
@media(max-width: 75em) {
    .element {
        display: none;
    }
}

Можно пойти другим путем и указать наоборот: минимальную ширину экрана, при которой Ваш элемент будет отображаться, а на всех экранах, ниже этой ширины, он будет скрываться. Пример:

.element {
    display: none;
}
@media(min-width: 75em) {
    .element {
        display: block;
    }
}

Используя правило @media Тут немного инфы

.resize{
  width: 720px;
  height: 620px;
  border: 2px solid #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  resize: both;
  overflow: auto;
}
.resize > div{
  width: 100%;
  text-align: center;
}
@media only screen and (max-width: 480px) {
  .pc{
    display: none;
  }
}
@media only screen and (min-width: 480px) {
  .  mob{
    display: none;
  }
}

<div>
  <div>Показать всем</div>
  <div>Показать на пк</div>
  <div>Показать на телефоне</div>
</div>

Зарегистрируйтесь или войдите

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

css — Как правильно скрыть любой HTML-тег?

спросил 11 лет, 1 месяц назад

Изменено 4 года, 4 месяца назад

Просмотрено 51к раз

Что такое правильный CSS для скрытия любого HTML.

 div {display:none; видимость:скрыта;}
 

 Здравствуйте!
Скрытый
World 

 Привет
Скрытый
World​​​​ 

 раздел {
    дисплей:нет;
}
 

 

  <голова>
    
    <стиль>
      @media (максимальная ширина: 767 пикселей) {
        .скрытый-мобильный {
          дисплей: нет;
        }
      }
     
  
  <тело>
     
Привет
 
    
Например, есть какой-то текст.
    
Этот текст будет скрыт на больших устройствах.
    
Например, есть какой-то текст.
  
 

 

  <голова>
    
    <стиль>
      @media (минимальная ширина: 768 пикселей) {
        . текст {
          дисплей: нет;
        }
      }
      @media (минимальная ширина: 992px) {
        .текст {
          дисплей: блок;
        }
      }
    
  
  <тело>
     
Привет
 
    
Например, есть какой-то текст.
    
Этот текст будет скрыт на больших устройствах.
    
Например, есть какой-то текст.
  
 

 

  <голова>
    
    
    <стиль>
      тело {
        фон: нет;
      }
    
  
  <тело>
     
Привет
 
    
Например, есть какой-то текст. 
    Этот текст будет скрыт на телефонах.
    
Например, есть какой-то текст.
  
 

  <голова> <стиль> тело {
 фон: нет;
 }   <тело>
Привет
Например, есть какой-то текст.