skillbox banner 468x60skillbox banner 728x90skillbox banner 930x180etxt banner 468x60etxt banner 728x90etxt banner 930x180smsc banner 468x60smsc banner 728x90smsc banner 930x180

Руководство по свойству display в CSS

Спецификация CSS определяет значение отображения по умолчанию для всех элементов. Например, элемент <div> по умолчанию рендерится как блочный элемент, а элемент <span> как строчный.

Изменение значения display по умолчанию

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

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

Теперь рассмотрим наиболее часто используемые значения display.

Display Block

Значение block свойства display заставляет элемент вести себя как блочный элемент, например, как элемент <div> или <p>. Правила в следующем примере переопределяют элементы <span> и <a> как блочные:

span {
    display: block;
}
a {
    display: block;
}

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

Display Inline

Значение inline свойства display приводит к тому, что элемент ведет себя так, как если бы он был строчным элементом, например элементом <span> или <a>. Правила в следующем примере переопределяют элементы <p> и <li> как строчные:

p {
    display: inline;
}
ul li {
    display: inline;
}

Display Inline-Block

Значение inline-block свойства display заставляет элемент генерировать блочный элемент. Соседние элементы имеющие это же свойство будут отображаться в одной строке. Следующие правила отображают элементы <div> и <span> в виде встроенного блока:

div {
    display: inline-block;
}
span {
    display: inline-block;
}

Display None

Значение none просто приводит к тому, что элемент вообще не генерирует никаких блоков. Дочерние элементы также не генерируют никаких блоков, даже если их свойство display установлено в отличное от none. Документ отображается так, как если бы элемент не существовал в дереве документа.

h1 {
    display: none;
}
p {
    display: none;
}

Значение none для свойства display не создает невидимое поле — оно вообще не создает поля. О том, как визуально убрать элемент, но создать поле в разделе css-visibility.

jivo banner 480x320jivo banner 728x90jivo banner 120x600flexbe banner 480x320flexbe banner 728x90flexbe banner 120x600kwork banner 480x320kwork banner 728x90kwork banner 120x600

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 4 / 5. Количество оценок: 2

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…
Подробнее

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…
Подробнее

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…
Подробнее