html.okpython.net
HTML и CSS для начинающих

CSS :: Свойство display

css-свойство display (от англ. displayотображение) устанавливает тип элемента, тем самым определяя, как элемент будет отображаться браузером в документе.

Характеристики

  • Значение по умолчанию: inline.
  • Применяется: ко всем элементам.
  • Наследуется: нет.
  • Анимируется: нет.
  • JavaScript: object.style.display="value".

Синтаксис

display: block | inline | inline-block | inline-table | inline-flex | flex | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group

Значения

  • block – элемент будет отображаться как блочный, в результате браузер начнет добавлять разрывы строк до и после элемента, при этом сам элемент будет занимать всю доступную в данной ситуации шириную, а высота элемента будет формироваться его содержимым.
  • inline – элемент будет отображаться как строчный, в результате браузер будет считать его частью строки, а ширина элемента будет формироваться его содержимым.
  • inline-block – элемент будет вести себя в общем потоке как строчный с тем отличием, что к нему можно будет применять свойства блочных элементов, например, можно будет задавать отступы и размеры.
  • inline-table – элемент будет вести себя в общем потоке как строчный с тем отличием, что к нему можно будет применять свойства элемента «table», т.е. значение предназначено для изменения формата обтекания таблицы соседними элементами.
  • inline-flex – элемент будет вести себя в общем потоке как строчный флекс-элемент.
  • flex – элемент будет вести себя в общем потоке как блочный флекс-элемент.
  • list-item – элемент будет отображаться как блочный, а перед его содержимым будет добавлен маркер списка.
  • none – элемент удаляется из общего потока, а все элементы ведут себя так, как-будто он отсутствует не только на странице, но и в исходном коде.
  • run-in – элемент будет вести себя как блочный или строчный в зависимости от контекста.
  • table – элемент будет отображаться как таблица.
  • table-caption – элемент будет отображаться как заголовок таблицы.
  • table-cell – элемент будет отображаться как ячейка таблицы.
  • table-column – элемент будет отображаться как колонка таблицы, как будто он является элементом «col».
  • table-column-group – элемент будет отображаться как группа колонок таблицы, как будто он является элементом «colgroup».
  • table-footer-group – элемент будет отображаться как нижняя часть таблицы, как будто он является элементом «tfoot».
  • table-header-group – элемент будет отображаться как заголовочная часть таблицы, как будто он является элементом «thead».
  • table-row – элемент будет отображаться как строка таблицы.
  • table-row-group – элемент будет отображаться как группа строк таблицы, как будто он является элементом «tbody».

Ссылки

Примеры

HTML Результат htmlCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		div, span{
		color: green;
		border: solid 2px blue;
		width: 200px;
		}
		
	</style>
	
</head>
<body>
	
	<span>
		По умолчанию элемент «span» является строчным элементом.
	</span>
	
	<div>
		По умолчанию элемент «div» является блочным элементом.
	</div><br>
	
	<div style="display: inline">
		Теперь элемент «div» стал строчным элементом и его ширина 
		определяется содержимым.
	</div><br><br>
	
	<span style="display: block">
		Теперь элемент «span» стал блочным элементом.
	</span><br>
	
	<div style="display: inline">Первый строчный «div».</div>
	
	<div style="display: inline-block">inline-block «div»</div>
	
	<div style="display: inline">Второй строчный «div».</div>
	
</body>
</html>

Пример №1

HTML Результат htmlCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>
	<style>
		
		.div_normal{
		width: 400px;
		height: 300px;
		margin: auto;
		margin-top: 20px;
		padding: 0px;
		background-color: #DFDFDF;
		border-radius: 5px;
		}
		
		/* Создаем блочный флекс-контейнер */
		.div_flex{
		display: flex;
		width: 400px;
		height: 300px;
		margin: auto;
		margin-top: 5em;
		padding: 0px;
		background-color: #DFDFDF;
		border-radius: 5px;
		}		
		
		p, span{
		width: 100px;
		background-color: #55aa55;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		color: #F9F9F9;
		}

	</style>
</head>
<body>

	<!-- По умолчанию display: block -->
	<div class="div_normal">
		<p>1</p><span>2</span><p>3</p><span>4</span>
		<p>5</p><span>6</span><p>7</p><span>8</span>
	</div>

	<!-- А здесь мы имеем дело с флекс-контейнером -->
	<div class="div_flex">
		<p>1</p><span>2</span><p>3</p><span>4</span>
		<p>5</p><span>6</span><p>7</p><span>8</span>
	</div>	
	
</body>
</html>

Пример №2