Рейтинг@Mail.ru
УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS РЕКЛАМА

CSS Урок 18 Отображение и Видимость Элементов


« Назад Далее »

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

Блок 1

Блок 2
Блок 3

Спрятать Элемент - diplay:none или visibility:hidden

Чтобы спрятать элемент, необходимо установить свойство display в "none" или установить свойство visibility в "hidden". Однако, заметьте, что эти два метода приводят к различным результатам:

visibility:hidden прячет элемент, но он будет по прежнему занимать то же место, что и прежде. Элемент будет спрятан, но будет по-прежнему влиять на компоновку страницы.

Пример

h1.hidden {visibility:hidden;}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

display:none прячет элемент так, что он не будет занимать место на странице. Элемент будет спрятан, и страница будет отображаться, как будто на ней вовсе нет этого элемента:

Пример

h1.hidden {display:none;}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает


CSS Отображение - Блочные и Встроенные Элементы

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

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

  • <h1>
  • <p>
  • <div>

Встроенный элемент занимает только необходимую ширину и не инициирует переносы строки.

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

  • <span>
  • <a>

Изменение того, Как Отображается Элемент

Превращение встроенного элемента в блочный элемент, и наоборот, может быть полезно, чтобы сделать специфический вид страницы и по-прежнему сохранить соответствие веб стандартам.

Следующие примеры отображают пункты списка как втроенные элементы:

Пример

li{display:inline;}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

Следующий пример отображает элементы span как блочные элементы:

Пример

display:block;

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

Замечание: Изменение типа отображения элемента влияет только на то, как элемент будет отображаться, но НЕ на вид элемента. К примеру: Встроенный элемент, установленный в display:block, не может иметь блочный элемент внутри себя.


Примеры

Еще примеры

Отображать элемент как встроенный элемент
Этот пример демонстрирует как отображать элемент в виде встроенного элемента.

Отображать элемент как блочный элемент
Этот пример демонстрирует как отображать элемент в виде блочного элемента.

Как свернуть элемент таблицы
Этот пример демонстрирует, как свернуть элемент таблицы.






« Назад Далее »
© 2011-2017 Уроки CSS
Рейтинг@Mail.ru