Display style block: display — CSS: Cascading Style Sheets

Leave a Comment / Разное / By /

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».

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css2/visuren.html#propdef-display

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/display

Примеры

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>
		Теперь элемент «div» стал строчным элементом и его ширина 
		определяется содержимым.
	</div><br><br>
	
	<span>
		Теперь элемент «span» стал блочным элементом.
	</span><br>
	
	<div>Первый строчный «div».</div>
	
	<div>inline-block «div»</div>
	
	<div>Второй строчный «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>
		<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>
		<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

Отображение CSS Свойство

❮ Пред. Следующий ❯

Свойство display определяет тип блока, который используется для элемента HTML.

С помощью свойства display мы можем переопределить начальное значение элемента. Например, блочный элемент можно отобразить как встроенный элемент, указав значение «встроенный». Встроенный элемент не принимает свойства высоты и ширины. Он просто проигнорирует это.

В HTML значения свойства display по умолчанию берутся из поведения, описанного в спецификациях HTML, или из таблицы стилей браузера или пользователя по умолчанию. С другой стороны, значением по умолчанию в XML является «встроенный».

В CSS есть несколько основных форматов блоков:

  • Встроенный
    Встроенные элементы или элементы встроенного уровня — это блоки, расположенные в строке, не разрывая ее. Элементы , , являются частью блока строки, но не могут вызывать разрыв строки. У встроенных элементов могут быть отступы и поля, но они не могут иметь ширину и высоту, потому что их определение на встроенных элементах не изменит его размеры. Указание отступов и полей для элемента приведет к смещению других элементов в строке только по горизонтали. Однако элемент встроенного уровня может принимать ширину и высоту, если он установлен как элемент встроенного блока с использованием свойства display.
  • Встроенный блок
    Элементы встроенного блока аналогичны встроенным элементам, за исключением ширины и высоты. Ширина и высота раздвигают элементы на линии как по горизонтали, так и по вертикали.
  • Блок
    Блочные элементы или элементы уровня блока не находятся в линейном блоке, а выходят за его пределы. По умолчанию они занимают как можно больше горизонтального пространства. Элементы уровня блока могут содержать другие элементы уровня блока.

    ,

      ,

      —

      ,
      ,
      и
        являются примерами элементов блочного уровня.
      1. Гибкий
        Свойство display также используется для Flexbox. Значение flex создает блок уровня блока для элемента и размещает содержимое в соответствии с моделью Flexbox. Здесь вы можете прочитать о The Ultimate Guide to Flexbox.
      2. Сетка
        Свойство display изначально задает макет Grid. Он создает блок уровня блока для элемента, размещающего содержимое в соответствии с моделью Grid.
      3. Табличные значения
        Отображаемые значения позволяют сделать так, чтобы нетабличные элементы вели себя как табличные элементы. Каждое из табличных значений заставляет элемент вести себя как соответствующий табличный элемент в HTML. Встроенная таблица ведет себя как HTML-элемент, но как встроенный блок. Внутри табличного поля находится контекст уровня блока.
         дисплей: встроенный | блок | содержание | гибкий | сетка | встроенный блок | встроенный гибкий | встроенная сетка | встроенный стол | элемент списка | обкатка | стол | заголовок таблицы | таблица-колонка-группа | группа заголовков таблиц | группа нижнего колонтитула | таблица-строка-группа | таблица-ячейка | стол-столбец | таблица-строка | нет | начальная | наследовать;

        Пример свойства display: 

         

  <голова>
    Название документа
    <стиль>
      . display ли {
        дисплей: встроенный;
        поле справа: 10px;
      }
    
  
  <тело>
     
        Пример отображения свойства
         
    
        Здесь элемент списка со своим начальным значением:
        
    <ул>
      
      4. Элемент списка
        5. 
      
      5. Элемент списка
        6. 
    
    
        Здесь элемент списка используется со свойством отображения. Используется значение "inline":
        
    <ул>
      
      6. Элемент 1.
        7. 
      
      7. Элемент 2.
        8.

        Попробуй сам »

        Результат

        Пример свойства display со значениями «inline» и «block»: 

         

  <голова>
    Название документа
    <стиль>
      .в соответствии {
        граница: 1px сплошная #1c87c9;
        дисплей: встроенный;
      }
      .блокировать {
        граница: 1px сплошная #1c87c9;
        дисплей: блок;
        высота: 30 пикселей;
        ширина: 300 пикселей;
      }
    
         
        
  
  <тело>
     
        Пример отображения свойства
         
    
        Здесь элемент списка имеет "начальное" значение.  Мы видим, что значение "inline" не принимает высоту и ширину:
        
    Это какой-то текст.
    Это другой текст.
    <час>
    
        Здесь элемент списка используется со значением "блок" свойства отображения:
        
    Это какой-то текст.
    Это другой текст.

        Попробуй сам »

        Пример свойства отображения со значением «блок»: 

         

  <голова>
    Название документа
    <стиль>
      .блокировать {
        дисплей: блок;
        граница: 1px сплошная #666;
        цвет фона: #eee;
        отступ: 10 пикселей;
        ширина: 200 пикселей;
      }
      .привет {
        граница: 1px сплошная #1c87c9;
        цвет фона: #8ebf42;
        отступ: 10 пикселей;
      }
    
  
  <тело>
     
        Пример отображения свойства
         
    <дел>
      Lorem Ipsum — это фиктивный текст полиграфической и наборной промышленности. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов. 
      
        Здравствуйте!
        
      Он пережил не только пять столетий, но и скачок в электронный набор текста, оставаясь практически неизменным.

        Попробуй сам »

        Пример свойства display со значением «contents»: 

         

  <голова>
    Название документа
    <стиль>
      .содержимое {
        дисплей: содержимое;
        граница: 1px сплошная #666;
        цвет фона: #eee;
        отступ: 10 пикселей;
        ширина: 200 пикселей;
      }
      .привет {
        граница: 1px сплошная #1c87c9;
        цвет фона: #ccc;
        отступ: 10 пикселей;
        выравнивание текста: по центру;
      }
    
  
  <тело>
     
        Пример отображения свойства
         
    <дел>
      Lorem Ipsum — это фиктивный текст полиграфической и наборной промышленности. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов. 
      
        Здравствуйте!
        
      Он пережил не только пять столетий, но и скачок в электронный набор текста, оставаясь практически неизменным.

        Попробуй сам »

        Пример свойства отображения со значением «flex»: 

         

  <голова>
    Название документа
    <стиль>
      #флекс {
        ширина: 300 пикселей;
        высота: 100 пикселей;
        граница: 1px сплошная #c3c3c3;
        отображение: -webkit-flex;
        /* Сафари */
        -webkit-justify-content: по центру;
        /* Сафари 6.1+ */
        дисплей: гибкий;
        выравнивание содержимого: по центру;
      }
      дел {
        ширина: 70 пикселей;
        высота: 70 пикселей;
      }
    
  
  <тело>
     
        Пример отображения свойства
         
    
        Здесь "display: flex;" используется:
        
    <дел>
      <дел>1
      <дел>2
      <дел>3

        Попробуй сам »


        Свойство отображения

        Свойство display определяет базовое поведение макета элемента. Большинство элементов имеют значение по умолчанию либо блока , либо встроенного .

        Блок

        Поведение блока заставляет элементы располагаться один под другим. Думайте об этом как о перевернутой гравитации: элементы падают вверх страницы и приземляются ниже того, что было раньше. Они также растягиваются по горизонтали, чтобы заполнить все доступное пространство в контейнере.

        Обратите внимание, что в этом примере между элементами div добавлено пространство, чтобы их было легче увидеть.

        Заголовки, абзацы, разделы div и многие другие элементы по умолчанию ведут себя как блоки.

        Обратите внимание, что хотя ни один из элементов в приведенном выше примере не содержит достаточно текста, чтобы заполнить все доступное горизонтальное пространство, каждый из них окружен невидимой рамкой, которая простирается до правого края контейнера. Мы можем сделать это поле видимым, добавив цвет фона.

        Обратите внимание, что в этом примере пространство между элементами определяется по умолчанию браузером для этих элементов.

        Встроенный

        Встроенное поведение приводит к тому, что элементы располагаются в горизонтальной строке слева направо, как слова в абзаце. И точно так же, как текст, они переносятся на новую строку, когда им не хватает места.

        Строковые элементы также ведут себя как слова, если помещаются в текстовую строку, такую ​​как strong в следующем примере:

        Встроенный блок

        Мы сталкиваемся с проблемами, когда пытаемся применить вертикальные (верхние и нижние) отступы, поля или границы к встроенным элементам. Чтобы сохранить положение текста в строке, эти свойства не влияют на положение элемента:

        Мы могли бы использовать display: block; , но это приведет к тому, что элемент будет растягиваться горизонтально по всему контейнеру:

        Так что вместо этого мы можем использовать гибрид дисплей: встроенный блок; , который сохраняет ограниченную ширину и размещается в горизонтальной строке, как текст, но учитывает вертикальные отступы, поля и границы:

        Приведенный выше пример вряд ли будет распространенным сценарием использования inline-block , но он может пригодиться по разным причинам, например, при оформлении ссылок, чтобы они выглядели как кнопки:

        Что произойдет в приведенном выше примере, если вы измените значение display на inline ? А если изменить на 9?0084 блок ? Это хорошая демонстрация различий между ними.

        Нет

        Иногда мы хотим полностью визуально удалить элемент со страницы, включая любое влияние, которое он может оказать на остальную часть макета страницы. Примеры могут включать модальное диалоговое окно, которое скрыто до тех пор, пока пользователь не выполнит действие, чтобы отобразить его, или содержимое свернутого элемента аккордеона в содержимом раскрывающегося меню, когда оно не используется. Для этого мы можем использовать display: none; , из-за чего элемент ведет себя так, как будто его вообще не существует.

        В приведенном выше примере попробуйте изменить значение свойства display на block . Обратите внимание, как появляется скрытый элемент. Измените его обратно на none и обратите внимание, как он снова исчезает, а макет закрывает пробел там, где он был.

        Другие отображаемые значения

        Существует ряд других возможных значений свойства display , в том числе display: flex; Дисплей и : сетка; , но они служат совершенно другой цели и рассматриваются в главах о Flexbox и CSS Grid соответственно.

        Добавить комментарий

        Ваш адрес email не будет опубликован. Обязательные поля помечены *