Кроме свойства float
, которое позволяет изменять позицию элемента, в CSS есть еще одно важное свойство - display.
Оно позволяет управлять блоком элемента и также влиять на его позиционирование относительно соседних элементов.
Это свойство может принимать следующие значения:
inline
: элемент становится строчным, подобно словам в строке текста
block
: элемент становится блочным, как параграф
inline-block
: элемент располагается как строка текста
list-item
: элемент позиционируется как элемент списка обычно с добавление маркера виде точки или порядкового номера
run-in
: тип блока элемента зависит от окружающих элементов
flex
: позволяет осуществлять гибкое позиционирование элментов
table
, inline-table
: позволяет расположить элементы в виде таблицы
none
: элемент не виден и удален из разметки html
Итак, значение block позволяет определить блочный элемент. Такой элемент визуально отделяется от соседних элементов переносом строки, как, например, элемент параграфа p или элемент div, которые по умолчанию являются блочными и при визуализации веб-страницы визуально переносятся на новую строку.
Однако элемент span
в отличие от элемента div блочным не является. Поэтому посмотрим, какие с ним произойдут изменения при применении значения
block
:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href="styles.css" rel="stylesheet"> <title>Свойство display в CSS3</title> <style> span{ color: red; } .blockSpan{ display: block; } </style> </head> <body> <div>Это <span>строчный</span> элемент span</div> <div>Это <span class="blockSpan">блочный</span> элемент span</div> </body> </html>
Здесь определено два элемента span, но один из них является блочным, так как к нему применяется стиль display: block;
. Поэтому этот элемент
span переносится на новую строку.
В отличие от блочных элементов строчные встраиваются в строку, так как имеют для свойства display
значение inline. Элемент
span как раз по умолчанию имеет стиль display: inline
, поэтому и встраивается в строку, а не переносится на следующую, как параграфы или div.
И теперь произведем обратную процедуру - сделаем блочный элемент div
строчным:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Свойство display в CSS3</title> <style> div{ display: inline; } </style> </head> <body> <div>Первый строчный элемент div.</div> <div>Второй строчный элемент div.</div> </body> </html>
Следует учитывать, что при применении значения inline
браузер игнорирует некоторые свойства, такие как width
, height
, margin
.
Еще одно значение - inline-block - представляет элемент, который обладает смесью признаков блочного и строчного элементов.
По отношению к соседним внешним элементам такой элемент расценивается как строчный. То есть он не отделяется от соседних элементов переводом строки.
Однако по отношению к вложенным элементам он рассматривается как блочный. И к такому элементу применяются свойства width
, height
,
margin
.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Свойство display в CSS3</title> <style> span{ width: 100px; height: 30px; background-color: #aaa; } .inineBlockSpan{ display: inline-block; } </style> </head> <body> <p>Проехав с полверсты в хвосте <span>колонны</span>, он остановился</p> <p>Проехав с полверсты в хвосте <span class="inineBlockSpan">колонны</span>, он остановился</p> </body> </html>
Первый элемент span является строчным, у него значение inline
, поэтому для него бессмысленно применять свойства width
и
height
. А вот второй элемент span
имеет значение inline-block
, поэтому к нему жуе применяются и ширина, и высота, и
при необходимости еще можно установить отступы.
Значение run-in определяет элемент, который зависит от соседних элементов. И здесь есть три возможных варианта:
Элемент окружен блочными элементами, тогда фактически он имеет стиль display: block
, то есть сам становится блочным
Элемент окружен строчными элементами, тогда фактически он имеет стиль display: inline
, то есть сам становится строчным
Во всех остальных случаях элемент считается блочным
Значение table по сути превращает элемент в таблицу. Посмотрим на примере списка:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Свойство display в CSS3</title> <style> ul{ display: table; margin: 0; } li{ list-style-type: none; display: table-cell; padding: 10px; } </style> </head> <body> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </body> </html>
Здесь список превращается в таблицу, а каждый элемент списка - в отдельную ячейку. Для этого у элемента списка устанавливается стиль display: table-cell
.
Фактически вместо этого списка мы могли бы использовать стандартную таблицу.
Значение none позволяет скрыть элемент, которого как-будто нет на веб-странице:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Свойство display в CSS3</title> <style> .invisible{ display: none; } </style> </head> <body> <p>Первый параграф</p> <p class="invisible">Второй параграф</p> <p>Третий параграф</p> </body> </html>