• CSS Основы

• Что Такое CSS ?
• Синтаксис CSS
• Селекторы id и class
• Добавление Стилей в HTML Документ

• CSS Оформление

• CSS Фон
• CSS Текст
• Шрифты в CSS
• CSS Ссылки
• CSS Списки
• CSS Таблицы

• CSS Блоки

• CSS Блочная Модель
• CSS Границы
• CSS Контуры
• CSS Поля
• CSS Отступы

• CSS Продвинутый

• Сгруппированные и Вложенные Селекторы
• CSS Размеры
• Отображение и Видимость Элементов
• CSS Позиционирование
• Плавающие Элементы
• CSS Выравнивание
• Псевдо Классы в CSS
• Псевдо Элементы в CSS
• Панель Навигации
• Галерея Изображений
• Прозрачность Изображений в CSS
• Спрайты Изображений
• CSS Медиа Типы
• Атрибутивные
  Селекторы
• Заключение

• CSS Примеры

• CSS Примеры

• CSS Справочники

• CSS Справочник
• CSS Единицы Измерения
• CSS Значения Цветов
• CSS Названия Цветов
• CSS HEX Значения Цветов

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

Блок 1

Блок 2

Блок 3

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

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

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

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

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

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

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

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

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

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

• <span>
• <a>

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

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

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

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

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

Еще примеры

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

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

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