Свойство display:

Свойство display:Здравствуйте всем.

Сегодня узнаем об очень интересном свойстве css display:.

Свойство display: отвечает в css за то, как будет показан элемент на странице.

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

Что-же тут интересного? А то, что свойство display: задано по умолчанию всем элементам html, и если оно не указано в коде, то браузер отобразит элемент так, как это в нём заложено.

Именно благодаря этому все элементы html подразделяются на блочные, такие как <div>, <p>, <table> и встроенные, такие как <span>, <img>, <a> и т.д.

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

Свойство display: имеет множество значений, которые мы сейчас рассмотрим.

Наиболее популярные из них это block (блочный), inline (встроенный) и none (не отображается).

1. display: block;

Элемент отображается как блочный. Задано по умолчанию всем блочным элементам.

Если задать встроенному элементу, то он будет отображён как блочный, то есть с новой строки и займёт всё пространство по ширине родительского блока.


CSS
span{
display: block;
border: 1px solid #777;
}
HTML
<p>Бла-бла-бла <span>Текс-текст-текст</span>бла-бла-бла</p>

Бла-бла-бла Текс-текст-текстбла-бла-бла

2. display: inline;

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

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


CSS
.blok{
display: inline;
border: 1px solid #777;
}
HTML
<div>Бла-бла-бла
<div class="blok">Текст-текст-текст</div>
</div>

3. display: none;

Делает элемент невидимым. Место элемента освобождается и может быть занято другими элементами.

4. display: inline-block;

Элемент остаётся встроенным, то есть располагается в строку и занимает место по своим размерам, но в то-же время принимает свойства блочного элемента, например width (ширина) и height (высота), которые недоступны встроенным элементам, кроме тега <img> которому display: inline-block; задан по умолчанию.

Удобно применять когда несколько блоков нужно расположить в одной строке.


CSS
div{
display: inline-block;
}
.blok{
border: 1px solid #777;
width: 100px;
height: 100px;
}
HTML
<div>
<div class="blok">Блок 1</div>
<div class="blok">Блок 2</div>
<div class="blok">Блок 3</div>
<div class="blok">Блок 4</div>
</div>

5. display: list-item;

Добавляет к элементу маркер списка. По умолчанию задан тегам списка, но может быть применён к любому элементу html.

Только при этом обязательно надо указать вид маркера.


CSS
div{
display: list-item;
list-style: inside circle;
}
HTML
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>

Дальше пойдут так называемые табличные значения.

Что это значит?

Свойство display: задано всем табличным тегам по умолчанию, но можно написать таблицу и с другими элементами html.

Понадобится это может, по моему, только в одном случае:

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

1. display: table;

Определяет элемент как таблицу. Отражается как блочный. (тег <table>)

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

2. display: table-caption;

Определяет заголовок таблицы. (тег <caption>)

3. display: table-row;

Определяет элемент как строку таблицы. (тег <tr>)

4. display: table-cell;

Определяет элемент как ячейку таблицы. (теги <td> <th>)

5. display: table-column;

Определяет элемент как колонку таблицы. (тег <col>)

6. display: table-column-group;

Определяет элемент как группу колонок. (тег <colgroup>)

7. display: table-header-group;

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

Применяется для задания группе строк однотипных свойств.

8. display: table-row-group;

Определяет элемент как контейнер для нескольких строк таблицы, расположенных в середине таблицы.

9. display: table-footer-group;

Определяет элемент как контейнер для нескольких строк таблицы, расположенных в конце таблицы.

Практическое применение значений group — табличная вёрстка сайта.

Напишем таблицу используя элемент <span>


CSS
.tab{
display: table;
border: 1px solid #888;
}
.row{
display: table-row;
}
.cell{
display: table-cell;
border: 1px solid #888;
padding: 10px;
}
HTML
<span class="tab">
<span class="row">
<span class="cell">Текст</span>
<span class="cell">Текст</span>
<span class="cell">Текст</span>
</span>
<span class="row">
<span class="cell">Текст</span>
<span class="cell">Текст</span>
<span class="cell">Текст</span>
</span>
</span>

На этом всё о свойстве CSS display:

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.
А так же:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *