Свойство Display
Свойство display
Кроме свойства 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 строчным:
Следует учитывать, что при применении значения inline браузер игнорирует некоторые свойства, такие как width, height, margin.
inline-block
Еще одно значение - inline-block - представляет элемент, который обладает смесью признаков блочного и строчного элементов. По отношению к соседним внешним элементам такой элемент расценивается как строчный. То есть он не отделяется от соседних элементов переводом строки. Однако по отношению к вложенным элементам он рассматривается как блочный. И к такому элементу применяются свойства width, height, margin.
Первый элемент span является строчным, у него значение inline, поэтому для него бессмысленно применять свойства width и height. А вот второй элемент span имеет значение inline-block, поэтому к нему уже применяются и ширина, и высота, и при необходимости еще можно установить отступы.
run-in
Значение run-in определяет элемент, который зависит от соседних элементов. И здесь есть три возможных варианта:
Элемент окружен блочными элементами, тогда фактически он имеет стиль
display: block, то есть сам становится блочнымЭлемент окружен строчными элементами, тогда фактически он имеет стиль
display: inline, то есть сам становится строчнымВо всех остальных случаях элемент считается блочным
Табличное представление
Значение table по сути превращает элемент в таблицу. Посмотрим на примере списка:
Здесь список превращается в таблицу, а каждый элемент списка - в отдельную ячейку. Для этого у элемента списка устанавливается стиль display: table-cell. Фактически вместо этого списка мы могли бы использовать стандартную таблицу.
Сокрытие элемента
Значение none позволяет скрыть элемент, которого как-будто нет на веб-странице:
Last updated