Самоучитель CSS Справочник CSS Селекторы Стили по умолчанию Цвета CSS Единицы измерения

CSS: Свойства display и visibility

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

пример работы свойства display со значением none
пример работы свойства visibility со значением hidden
flower

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

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

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

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

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

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

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

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

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

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

Строчно-блочное отображение элемента задается значением 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>
Try it »

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

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

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

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

Реклама на сайте | puzinfo@puzzleweb.ru | ruen