Каждый элемент HTML имеет свойство отображения. Свойство Display сообщает веб-странице, как элемент будет отображаться на веб-странице. По умолчанию все элементы HTML имеют встроенное свойство отображения. Используя таблицы стилей агента пользователя, некоторые элементы, такие как div, section, ul, имеют свойство блочного отображения.
Таблицы стилей пользовательского агента переопределяются всем, что вы устанавливаете в своей собственной таблице стилей. Это просто дно: в отсутствие каких-либо таблиц стилей, предоставляемых страницей или пользователем, браузер все равно должен отображать содержимое каким-то образом, и таблица стилей пользовательского агента просто описывает это.
Теперь мы обсудим все свойства отображения CSS3.
дисплей: встроенный
span
, b
, textarea
теги HTML, которые по умолчанию имеют встроенные свойства отображения. display:inline
означает перенос содержимого элемента без разрыва потока текста.
HTML: <span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the <em>1500s</em>, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </span> CSS3: em { border: 2px solid blue; padding: 0 10px }
display:inline
толкать другие элементы только по горизонтали.
HTML: <span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the <em>1500s</em>, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </span> CSS3: em { border: 2px solid blue; padding: 10px 10px }
display:inline
не принимает высоту и ширину.
дисплей: блок
div
, ul
, section
теги HTML, которые по умолчанию блокируют свойства отображения. display:block
разрывает строку и помещает элемент в новую строку.
HTML: <div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the <em>1500s</em>, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> <em>Block Level content</em> <div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the <em>1500s</em>, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> CSS3: div { margin: 10px 10px; border: 1px solid red; } em{ margin: 0 10px }
Первый и последний элементы являются элементами уровня блока, а средний элемент является встроенным элементом. Встроенный элемент помещается в следующую строку, потому что блоки разбиваются ниже встроенных элементов.
дисплей: встроенный блок
Если вы установите display:inline-block
для любого элемента, вы сможете установить ширину и высоту этого элемента и обернуть содержимое элемента, не прерывая поток текста.
HTML: <div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard <p>dummy</p> text ever since the, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> CSS3: div { margin: 10px 10px; } p{ display: inline-block; width: 100px; height: 100px; background-color: red; color: #fff; text-align: center; }
display:inline-block
принимая высоту и ширину и сдвигая другие элементы по горизонтали и вертикали с обеих сторон
дисплей: нет
display:none
удалить элементы с веб-страницы. Элемент все еще находится на веб-странице, но он удален визуально.
Если вы создаете адаптивную веб-страницу, есть два свойства отображения: grid и flex. мы обсудим эти свойства в серии статей об адаптивных веб-страницах.