Css скрыть: Методы скрытия элементов веб-страниц / Хабр

Содержание

CSS: Как скрыть элемент HTML

Блочные и строчные элементы
Скрытие элементов

CSS свойства display и visibility позволяют скрывать элементы (делать их невидимыми) и полностью убирать элементы из HTML разметки (в этом случае браузер игнорирует элемент, при построении разметки страницы).

Блочные и строчные элементы

Большинство элементов в CSS классифицируются как блочные (block) или строчные (inline), и это влияет на то, как эти элементы будут отображаться по умолчанию на веб-странице.

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

CSS свойство display позволяет переопределить тип элемента, заданный по умолчанию. Что в свою очередь, позволят по необходимости изменять тип элемента со строчного на блочный или с блочного на строчный.

Строчные элементы

Элемент определённый как строчный, будет занимать только необходимое количество места на веб-странице (занимаемое место зависит от содержимого строчного элемента), кроме этого такие элементы:

игнорируют верхний и нижний внешний отступ, если он применен
игнорируют свойства height и width
могут быть выровнены с помощью свойства vertical-align

Строчный элемент можно сделать блочным если установить для свойства display значение block или если сделать элемент плавающим. Плавающие элементы автоматически становятся блочными, то есть появляется возможность регулировать размер элемента и задавать внешние отступы.

Блочные элементы

Блочные элементы всегда начинаются с новой строки и занимают всю доступную ширину, если ширина для элемента не была установлена. Кроме этого блочные элементы:

могут иметь внешние и внутренние отступы
растягиваются по высоте под свое содержимое
не выравниваются свойством vertical-align

Строчно-блочные элементы

Строчно-блочное отображение элемента задается значением inline-block. В основном это способ сделать элемент строчным, но сохранить его «блочные» возможности: изменение высоты и ширины элемента, регулирование размеров внешних и внутренних отступов.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p { display: inline; }	
      span { display: block; }  
	  li { display: inline-block; }
    </style>
  </head>
  <body>
    <p>Абзац 1.</p><p>абзац 2.</p>
    <span>Практическое применение свойства display мы рассмотрим</span>
    <span>в главе "CSS меню"</span>
	<ul>
	  <li>Пункт 1</li>
	  <li>Пункт 2</li>
	  <li>Пункт 3</li>
	</ul>
  </body>
</html>

Попробовать »

Примечание: значение inline-block не поддерживается в IE7 и более ранних версиях.

Скрытие элементов

В CSS есть возможность временного или постоянного скрытия некоторых элементов веб-страницы. Стоит обратить внимание на то, что скрытые элементы не будут отображаться только на веб-странице, но их можно будет посмотреть в исходном коде HTML-документа. Для скрытия элементов используется или свойство

display со значением none или свойство visibility со значением hidden:

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      h2.
  hidden { visibility: hidden; }
      h3.none { display: none; }
    </style>
  </head>
  <body>
    <h2>Это видимый заголовок</h2>
    <h2>Скрытый заголовок</h2>
    <h3>Скрытый заголовок2</h3>
    <p>Элемент, который скрыт с помощью свойства visibility, все равно занимает
     пространство там, где он должен находиться в отличие от элемента скрытого с помощью
     свойства display, который убран из общего потока страницы.</p>
  </body>
</html>

Попробовать »

Как скрыть элемент с помощью css : 4 простых способа.

Привет, дорогие читатели, на связи Шевченко Вячеслав и сегодня очередная статья из серии css о том как скрыть элемент на странице. На днях я публиковал статью о переменных в css, рекомендую к прочтению.
Существует несколько способов скрыть блок в CSS. Можно указать opacity: 0, visability: hidden, display: none или установить крайние значения для абсолютного позиционирования.
Вы можете спросить зачем так много способов, ведь они делат одно и тоже? Если разобраться лучше то, на самом деле, они отличаются друг от друга. И эта разница диктует, какой из них должен использоваться в конкретной ситуации. Дальше вы узнаете незначительные различия, которые вы должны принимать во внимание, когда скрываете элемент.

Opacity

Свойство opacity устанавливает прозрачность элемента. Это означает, что opacity: 0 скрывает div только визуально. Он как и раньше занимает свою позицию, влияет на макет веб-страницы и будет доступен для взаимодействия.

.hide {
  opacity: 0;
}

Если вы собираетесь использовать свойство непрозрачности, чтобы скрыть элемент от пользователя, то, к сожалению, это не лучший вариант. Элемент и его содержание доступно, так же как и все другие элементы на веб-странице. Другими словами, элемент ведет себя так, словно он непрозрачный.
Свойство непрозрачности можно анимировать и использовать для создания эффектов. Любой элемент с непрозрачностью меньше 1 также создаст новый контекст наложения.
При наведении на второй блок, элемент плавно переходит от состояния полной прозрачности до opacity: 1. Блок также имеет cursor: pointer, чтобы показать, что с ним можно взаимодействовать.

Visibility

Следующий способ скрыть блок или текст свойство —

visibility. Значение hidden будет скрывать элемент. Так же, как и свойство opacity, скрытый элемент будет влиять на макет нашей веб-страницы. Единственное отличие заключается в том, что на этот раз он не будет доступен для взаимодействия. Кроме того, он будет скрыт от чтения с экрана.
Это свойство можно анимировать до тех пор, пока начальные и конечные состояния имеют различные значения. Это гарантирует плавный переход между состояниями видимости.

.hide {
   visibility: hidden;
}

Ниже пример, можете посмотреть разницу.
Обратите внимание на то, что потомки элемента с visibility: hidden могут быть видимыми, если их свойство visibility: visible. Попробуйте навести курсор только на скрытый элемент, а не на пункт внутри. Вы увидите, что тип курсора не изменится. Кроме того, если вы попытаетесь щелкнуть на элемент, ваши клики не будут учтены.

Тег внутри будет как и раньше захватывать все события мыши. Как только вы наведете курсор мыши на текст он станет видимым и начнет регистрировать события.

Display

Свойство display скрывает элемент со страницы целиком. При display: none элемент вырывается из потока и соседние элементы в DOM перестают на него реагировать.
Все дочерние элементы также будут скрыты. К этому свойству не применяют анимацию, так как переход между различными состояниями всегда будет резким.
Обратите внимание, что элемент по-прежнему доступен через DOM. Вы можете работать с ним так же, как с любым другим элементом.

.hide {
   display: none;
}

Второй блок имеет элемент с display: block, но этот пункт остается невидимым. Это еще одна разница между visibility: hidden и display:none.

В первом случае, любой потомок, который явно задает visibility: visible станет видимым, тогда как с display все иначе — все потомки остаются скрытыми независимо от значения свойства.
Теперь, наведите курсор мыши на первый блок несколько раз. Есть? Нажмите на первый блок. Это должно сделать второй блок видимым. Значение внутри должно стать больше 0. Это происходит потому, что элемент, несмотря на то, что он скрыт от пользователей, все еще доступен с помощью JavaScript.

Position

Допустим, у вас есть элемент, с которым вы хотели бы взаимодействовать, но вы не хотите, чтобы он влиял на верстку страницы. Никакое свойство до этого не может справиться с этой задачей должным образом. Одна вещь, которую вы можете сделать в этой ситуации — переместить элемент в окне. Таким образом, это не повлияет на макет. Вот CSS, чтобы сделать это:

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

Ниже пример который продемонстирует, как абсолютное позиционирование скрывает элементы:
Основная идея здесь — установить негативные top и left значение так, чтобы элемент больше не было видно на экране.
В этой статье мы рассмотрели как скрыть элемент с помощью CSS, надеюсь вы теперь с легкостью сможете подобрать для себя подходящий способ.
Если эта статья оказалась полезной для вас, поделитесь ей с социальных сетях. Этим вы поддержите ресурс.
Так же подписывайтесь в наши группы facebook и vkontakte. До встречи в новых статьях!

Макет CSS — свойство отображения

❮ Предыдущий Далее ❯

Свойство display является наиболее важным свойством CSS для управления макетом.

Свойство отображения

Свойство отображения определяет, отображается ли элемент и каким образом.

Каждый элемент HTML имеет отображаемое значение по умолчанию в зависимости от типа элемента это. По умолчанию для большинства элементов отображается значение , блок или встроенный .

Нажмите, чтобы показать панель

Эта панель содержит элемент

, который по умолчанию скрыт ( display: none ).

Он оформлен с помощью CSS, и мы используем JavaScript для его отображения (измените его на ( display: block ).

Элементы уровня блока

Элемент уровня блока всегда начинается с новой строки и занимает доступна полная ширина (тянется влево и вправо, насколько это возможно).

Элемент

является элементом блочного уровня.

Примеры блочных элементов:

—
<р>
<форма>
<заголовок>
<нижний колонтитул>
<раздел>

Встроенные элементы

Встроенные элементы не начинаются с новой строки и занимают ровно столько ширины, сколько необходимо.

Это встроенный элемент внутри абзаца.

Примеры встроенных элементов:

<диапазон>
<а>
<изображение>

Дисплей: нет;

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