Здравствуйте всем.
Сегодня узнаем об очень интересном свойстве 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:
