Свойство display
Задает тип элемента и позволяет менять поведение элемента в потоке, а так же меняет работу некоторых CSS свойств в соответствии с выбранным типом.
display: block;
Значения
display: значение;
Значения, которые задают тип элементу и влияют на поток элемента в документа: block, inline
Значения, которые определяют как будут располагаться дочерние элементы блока: table, flex, grid
Значения, которые задают тип элемента и работают только если являются дочерними элементами с определенным типом: table-row-group, table-header-group, table-footer-group, table-column-group, table-column, table-caption, table-cell, table-row
Другие значения: inline-block, inline-flex, inline-grid, list-item
display: none;
Элемент скрыт со страницы, как если бы его не было в HTML
<style>
.example-1 {
display: none;
}
</style>
<div class="example-1">Меня нет</div>
display: block;
Блочный тип элемента. Каждый элемент начинается с новой строки и занимает 100% ширины по умолчанию. Блочные элементы по умолчанию: div, section, nav, header, footer, main, aside, article, p
<style>
.example-2 {
display: block;
margin-bottom: 2px;
padding: 5px;
background-color: #e13737;
color: #fff;
}
</style>
<a class="example-2" href="#">Блочная ссылка</a>
<a class="example-2" href="#">Блочная ссылка</a>
display: inline;
Строчный тип элемента. Элементы будут идти в одну строку, пока позволяет свободное место, после чего будут перенесены на новую строку. Строчные элементы по умолчанию: b, strong, i, em, u, a, span, mark, del, ins, s, small
<style>
.example-3 {
display: inline;
background-color: #e13737;
}
</style>
<div class="example-3">Lipsum dolor</div>
<div class="example-3">Lipsum dolor</div>
display: inline-block;
Гибридный тип элемента, который в потоке ведет себя как строчный, но может принимать CSS свойства для блочных элементов (width, height и тд.)
<style>
.example-4 {
display: inline-block;
width: 50px;
height: 50px;
margin: 2px;
background-color: #e13737;
}
</style>
<div class="example-4"></div>
<div class="example-4"></div>
display: table;
Элемент ведет себя как таблица (table), а его прямые потомки ведут себя как строки таблицы, но для корректной работы нужно установить им значение display: table-row, а ячейкам display: table-cell
<style>
.example-5 {
display: table;
border-collapse: collapse;
width: 100%;
background-color: #e5e5e5;
}
.example-5-row {
display: table-row;
}
.example-5-cell {
display: table-cell;
padding: 5px;
border: 1px solid #ccc;
}
</style>
<div class="example-5">
<div class="example-5-row">
<div class="example-5-cell">1</div>
<div class="example-5-cell">2</div>
</div>
<div class="example-5-row">
<div class="example-5-cell">1</div>
<div class="example-5-cell">2</div>
</div>
</div>
display: flex;
Элемент становится flexbox контейнером, а его прямые потомки - элементами flexbox контейнера
<style>
.example-6 {
display: flex;
justify-content: space-between;
outline: 2px dashed #ccc;
}
.example-6-item {
padding: 5px;
background: #52c32d;
}
</style>
<div class="example-6">
<div class="example-6-item">1</div>
<div class="example-6-item">2</div>
</div>
Читайте также
Обсуждение (2)
Войдите или зарегистрируйтесь для того чтобы оставлять комментарии
-
AchivMenКак и у видео на ютубе, значения этих самих атрибутов