Свойство display, пожалуй, одно из самых важных свойств в CSS.

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

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

  • inline
  • inline-block
  • block
  • flexbox
  • grid
  • none
  • table

🤓 Хотите быть в курсе новостей веб-разработчиков?
🚀 Хотите, чтобы последние новости доставлялись прямо на ваш почтовый ящик?
🎉 Присоединяйтесь к растущему сообществу дизайнеров и разработчиков!

Подпишитесь на мою рассылку здесь → https://easeout.eo.page

В линию

Значение inline является значением по умолчанию для каждого элемента в CSS.

display: inline;

Изящный способ визуализации inline - представить абзац, содержащий несколько слов, выделенных жирным шрифтом <b> или <span>:

Здесь к элементу <span> нанесена синяя рамка, и поток текста не прерывается. Он сидит inline с текстом.

Мы можем применять отступы и поля к встроенным элементам, однако окружающие элементы будут отодвигаться только в горизонтальном направлении (не вертикальном). Кроме того, height и width игнорируются inline элементами.

Каждый HTML-тег отображается встроенным, если не указано иное, за некоторыми исключениями, такими как div, p и section, которые установлены как block.

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

display: inline-block;

Элемент с inline-block очень похож на inline, однако width и height могут применяться, как указано.

Блокировать

display: block;

Как уже упоминалось, для ряда элементов по умолчанию установлено значение block. Это элементы макета, такие как <div>, <section> и <ul>. Также текстовые элементы, такие как <p> и <h1>.

Элементы блочного уровня укладываются друг за другом в вертикальном направлении. По умолчанию каждый элемент занимает 100% ширины страницы.

Если указано, все значения, присвоенные width и height, а также margin и padding, соблюдаются.

Flexbox

Свойство display также используется при работе с flexbox:

display: flex;

Ознакомьтесь с Руководством по Flexbox, чтобы узнать больше об этом методе.

Сетка

При использовании CSS Grid мы также устанавливаем свойство display:

display: grid;

Ознакомьтесь с полным руководством по CSS Grid, чтобы узнать больше об этом методе.

None

display: none;

Мы используем display: none, чтобы элемент исчез.

Он по-прежнему загружен в наш HTML-код, но не отображается в браузере.

Табличные значения

display: table;

С появлением современных методов компоновки, таких как flexbox и grid, HTML-элемент <table> стал своего рода пережитком.

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

element {
  display: table;
  display: table-cell;
  display: table-column;
  display: table-row;
  display: table-caption;
}

Мы могли бы использовать это так:

<div style="display: table;">
  <div style="display: table-row;">
    <div style="display: table-cell;">
      Cell content.
    </div>
  </div>
</div>

Это не распространенный метод, поскольку он создает беспорядочную разметку, но может иметь странный вариант использования.

Готовы ли вы поднять свои навыки CSS на новый уровень? Начните прямо сейчас с моей новой электронной книги: Руководство по CSS: Полное руководство по современному CSS. Будьте в курсе всего, от основных концепций, таких как Flexbox и Grid, до более сложных тем, таких как анимация, архитектура и многое другое !!

Спасибо за прочтение! 🎉🎉🎉