Различия

Показаны различия между двумя версиями страницы.

--- css:display [2022/09/08 15:32] – so_v_a
+++ css:display [2026/08/06 08:59] (текущий) – so_v_a
@@ Строка 1: / Строка 1: @@
+<!DOCTYPE markdown>
 # CSS. Свойство display
@@ Строка 15: / Строка 17: @@
   * блочно-строчные, display: inline-block,
   * гибкие или флексовые (флексы), display: flex.
@@ Строка 25: / Строка 28: @@
 **Особенности блочных боксов:**
-До и после блочного бокса есть принудительный перенос строки. На одной строке с таким боксом не может находиться никакой другой элемент. Даже если блочный бокс почти не содержит контента или занимает лишь маленькую часть строки — он всё равно на строке один.
+  * До и после блочного бокса есть принудительный перенос строки. На одной строке с таким боксом не может находиться никакой другой элемент. Даже если блочный бокс почти не содержит контента или занимает лишь маленькую часть строки — он всё равно на строке один.
+  * На блочные боксы действуют все свойства блочной модели (width, height, margin, padding).
+  * Блочный бокс по умолчанию тянется на всю ширину родительского элемента.
+  * По высоте блочный бокс ужимается под содержимое.
+## display: inline
+Строчный бокс — это фрагмент текста, который может разрываться и находиться на нескольких строках.
+Элементы, боксы которых по умолчанию являются строчными, это теги, с помощью которых размечают небольшие куски текста, словосочетания: <a>, <span>, <button>, <strong>, <em>, <i>, <b>, <time>.
+**Отличия строчных и блочных боксов:**
+У строчных боксов несколько отличий от блочных:
+  * Строчные боксы ведут себя как текст, то есть могут располагаться и на одной строке, и на нескольких. Если такой бокс не помещается на одной строке, то он переносится на следующую.
+  * Строчные боксы плохо взаимодействуют со свойствами блочной модели. Некоторые свойства на них просто не действуют, а некоторые — действуют частично. Например, отступы в строчных боксах работают только в горизонтальном направлении.
+  * Размеры строчных боксов всегда зависят от содержания.
+## display: inline-block
+Блочно-строчные боксы сочетают в себе особенности и блочных боксов, и строчных боксов. Этот тип боксов используется для стилизации мелких интерфейсных элементов и элементов текстового содержания.
+## display: flex
+Флексы — основной инструмент построения крупных сеток и микросеток.
-На блочные боксы действуют все свойства блочной модели (width, height, margin, padding).
+**Особенности, которые следует помнить и учитывать**:
-Блочный бокс по умолчанию тянется на всю ширину родительского элемента.
+  * Все блоки - «резиновые», что уже следует из названия flex. Элементы могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство.
+  * Выравнивание по вертикали и горизонтали, базовой линии текста, отлично работает.
+  * Расположение элементов в HTML не имеет решающего значения. Его можно поменять в CSS.
+  * Элементы могут автоматически выстраиваться в несколько строк/столбцов, занимая всё предоставленное место.
+  * Множество языков в мире используют написание справа налево rtl (right-to-left), в отличии от привычного нам ltr (left-to-right). В браузерах с локалью rtl все элементы будут автоматически расположены в обратном порядке.
-По высоте блочный бокс ужимается под содержимое.
+Подробно синтаксис CSS-правил для flex смотри [[css:flexbox|здесь]].
-https://htmlacademy.ru/blog/articles/display-in-css?utm_source=vk&utm_medium=social&utm_campaign=blog1379_08092022