Свойства display и visibility

В этой главе:

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

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

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

Блок 1
пример работы свойства display значение none
Блок 2
пример работы свойства visibility значение hidden
Блок 3
flower

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

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

Понимание принципа работы свойства display очень важно, поскольку оно объясняет, почему некоторые CSS свойства будут работать с одним элементом и не будут работать с другим. Знание установленного по умолчанию значения block или inline означает, что можно изменять это значение по необходимости.

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

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

  • игнорируют верхний и нижний внешний отступ, если он применен

  • игнорируют свойства height и width

  • могут быть выровнены с помощью свойства vertical-align

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

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

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

  • могут иметь внешние и внутренние отступы

  • растягиваются по высоте под свое содержимое

  • не выравниваются свойством vertical-align

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

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

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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; - указание браузеру скрыть элемент, зарезервировав под него место на веб-странице. В этом случае браузер только скрывает элемент, не удаляя его из общего потока, поэтому на месте скрытого элемента останется пустое пространство, совпадающее по размеру с размером скрытого элемента.

Попробуйте сами:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!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>