CSS свойство display
Сегодня мы разберем css свойство display, при помощи которого можно задать, как элемент будет выглядеть в браузере. Каждый тег, который мы пишем, по умолчанию имеет определенное значение тега display, будь то строчный элемент, блочный, или даже таблица. Здесь мы и будем изучать основные значения данного свойства. Первое значение, которое мы изучим - это значение block, означающее, что элемент будет являться блочным, и если его применить к строчному элементу, то его поведение будет как у блочного элемента. Второе значение свойства display - это inline, которое означает, что элемент будет строчным, аналогично, если применить данное значение для блочного элемента, то он будет вести себя как строчный элемент. Третье свойство, рассматриваемое нами - inline-block, строчно-блочный тип. Если данное значение применить к элементу то, его внутренняя часть будет вести себя как блочный элемент, а сам элемент будет строчным. Следующее значение - table, и как Вы уже догадались, элемент является таблицей, как будто мы применили тег table. Значение table-cell, указывает, что элемент будет вести себя как ячейка таблицы. А вот значение table-row, думаю, Вы уже догадались, означает, что поведение будет такое же, как и у строки таблицы. Последнее значение, которое мы изучим - это none. Если применить данное значение, то элемент временно исчезнет, при этом его место будет заполнено, как будто данного элемента и вовсе не существует. Существуют еще некоторые значения данного свойства, однако они редко могут Вам понадобиться, но если Вас они заинтересовали, можете почитать о них в справочнике. А сейчас я приведу немного примеров к этому css свойству.
<html>
<head>
<title>Свойство display</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<span class="inline">Строчный элемент</span>
<br />
<span class="block">Блочный элемент</span>
<br />
<span class="inline-block">Строчно-блочный элемент</span>
</body>
</html>
Применяем следующие css стили:
.inline {
background: #0fa;
display: inline;
height: 30px;
width: 300px;
}
.block {
background: #0fa;
display: block;
}
.inline-block {
background: #0fa;
display: inline-block;
height: 30px;
width: 300px;
}
А теперь смотрим на результат:
Мы задали каждому элементу span, отдельный класс, который означает, какое значение свойства display будет применяться в данном случае. А в стилях задали, цвет фона, а также для строчного и строчно-блочного элемента, установили ширину и высоту. В первом случае ширина и высота у элемента не установились, т.к., элемент является строчным. А во втором случае, они применились, ведь я писал, что внутри элемент становится блочным, а сам является строчным. После данного примера, надеюсь, Вы поняли значение данного свойства. К блочному элементу мы не применяли высоту и ширину, ведь ширина блочного элемента определяется шириной окна браузера. Вот мы и изучили свойство display, которое вы будете применять при создании своих сайтов постоянно. Всего доброго!
