САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

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 Псевдо-элементы CSS Прозрачность CSS Панель навигации CSS Выпадающий CSS Галерея CSS Спрайты CSS Атрибуты селекторов CSS Формы CSS Счетчики CSS Макет сайта CSS Еденицы измерений CSS Особенности

CSS3 Учебник

CSS3 Закругленные углы CSS3 Границы CSS3 Слои фона CSS3 Цвета CSS3 Градиент CSS3 Тени CSS3 Эффект текста CSS3 Веб шрифты CSS3 2D трансформация CSS3 3D трансформация CSS3 трансформация CSS3 Анимация CSS3 Подсказки CSS3 Стиль изображения CSS3 Объект-подгонка CSS3 Кнопки CSS3 Пагинация CSS3 Несколько столбцов CSS3 Интерфейс CSS3 Переменные CSS3 Бокс размеры CSS3 Гибкий бокс CSS3 Медиа запросы CSS3 Медиа примеры

CSS3 Адаптивный дизайн

Введение Область просмотра Вид сетки Медиа запросы Изображения Видео Фреймворк Шаблоны

CSS Сетка

Сетка Введение Сетка Контейнер Сетка Пункт

CSS Примеры

CSS Макеты CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

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

CSS Справочник CSS Поддержка CSS Селекторы CSS Функции CSS Звук CSS Веб Шрифты CSS Анимации CSS Длины CSS PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы

СSS Дисплей



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


Свойство дисплей

Свойство display указывается, если/как элемент.

Каждый элемент HTML имеет значение по умолчанию в зависимости от типа элемента. Значение по умолчанию для большинства элементов display устанавливаетсяblock или inline

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

Панель содержит элемент <div>, который по умолчанию скрыт (display: none).

Стиль CSS с использованием JavaScript, показывает изменение элемента в (display: block).


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

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

Элемент <div> является элементом уровня блока.

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

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

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

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

Элемент <span> встроенный элемент внутри параграфа.

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

  • <span>
  • <a>
  • <img>

Скрыть и показать

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

Элемент <script> использует display: none; по умолчанию.


Переопределить значение по умолчанию

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

Изменение встроенного элемента в блочный элемент, или наоборот, полезно для создания страницы выглядеть определенным образом, и по-прежнему следовать веб-стандартам.

Типичным примером является изготовление встроенных элементов <li> для горизонтального меню:

Пример

li {
   display: inline;
}
Редактор кода »

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

В следующем примере отображается элемент <span> как элемент блока:

Пример

span {
   display: block;
}
Редактор кода »

В следующем примере отображается элемент <a> как элемент блока:

Пример

a {
   display: block;
}
Редактор кода »

Как скрыть элемент?

display:none

Изображение

visibility:hidden

Изображение

Сброс

Изображение

Скрытие элемента может быть сделано путем установки свойство display с none. Элемент будет скрыт и страница будет отображаться как будто элемент не существует:

Пример

h1.hidden {
   display: none;
}
Редактор кода »

visibility:hidden; также скрывает элемент.

Однако элемент все равно занимает столько же места, сколько и раньше. Элемент будет скрыт, но влияет на макет:

Пример

h1.hidden {
   visibility: hidden;
}
Редактор кода »

Еще Примеры

Различия между display: none; и visibility: hidden;
Пример демонстрирует display: none; и версию visibility: hidden;

Использвать CSS вместе с JavaScript для отображения контента
Пример показывает, как использовать CSS и JavaScript, чтобы показать элемент по клику.


Проверьте себя с помощью упражнений!


Свойства CSS дисплей/видимость

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