CSS Компоновка - Дисплей недвижимости

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

Дисплей недвижимости

display свойство определяет , если / , как отображается элемент.

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

Кликните для просмотра панели

Элементы уровня блока

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

Примерами элементов блочного уровня:

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

строковые элементы

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

Это встроенный <span> элемент внутри абзаца.

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

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

Дисплей: нет;

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

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

Изменить настройки по умолчанию дисплей значений

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

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

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

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

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

Скрывающую элемент - display:none или visibility:hidden ?

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

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

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

Еще примеры

display: none; по сравнению с visibility: hidden;
Этот пример демонстрирует display: none; против visibility: hidden;

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

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

Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4»

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