Учебник по свойству отображения CSS

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

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

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

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

Inline

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

display: inline;

Для наглядного представления inline можно представить себе абзац, содержащий несколько слов, выделенных жирным шрифтом или тегами.

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

Каждый тег HTML отображается inline, если не указано иное, за некоторыми исключениями, такими как 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;

Сетка

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

display: grid;

Нет

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>

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

Заключение

Если вам понравилась эта статья, следуйте за мной в Twitter, где я ежедневно пишу о вещах, связанных с техникой!
Если вам понравилась эта статья и вы хотите оставить совет — нажмите здесь

🌎 Давайте общаться

• Портфолио

• Twitter

• LinkedIn

• Hashnode

• Devto

• Medium

• Github

• Codepen