Java, UX, HTML, CSS, WEB-design

Понимание макета CSS и контекста форматирования блоков


  • Рэйчел Эндрю

  • 0 Комментарии

Понимание макета CSS и контекста форматирования блоков

  • 9 минут чтения

  • CSS, макеты, браузеры

Краткое резюме ↬

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

В макете CSS есть несколько концепций, которые могут действительно улучшить вашу игру с CSS, как только вы их поймете. Эта статья посвящена контексту блочного форматирования (BFC). Возможно, вы никогда не слышали об этом термине, но если вы когда-либо делали макет с помощью CSS, вы, вероятно, знаете, что это такое. Понимание того, что такое BFC, почему оно работает и как его создать, полезно и может помочь вам понять, как макет работает в CSS.

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

Что такое БФК?

Как ведет себя блочный контекст форматирования (BFC), проще всего понять на простом примере с плавающей запятой. В приведенном ниже примере у меня есть поле, содержащее изображение, которое было перемещено влево, и некоторый текст. Если у нас есть достаточное количество текста, он обтекает плавающее изображение, а затем граница проходит вокруг всей партии.

<div class="outer">
      <div class="float">I am a floated element.</div>
      I am text inside the outer box.
    </div>
.outer {
      border: 5px dotted rgb(214,129,137);
      border-radius: 5px;
      width: 450px;
      padding: 10px;
      margin-bottom: 40px;
    }

    .float {
      padding: 10px;
      border: 5px solid rgba(214,129,137,.4);
      border-radius: 5px;
      background-color: rgba(233,78,119,.4);
      color: #fff;
      float: left;
      width: 200px;
      margin: 0 20px 0 0;
    }
Скриншот коробки с рамкой, внутри плавающий элемент с обтеканием текста
Текст обтекает плавающий элемент. (Большой превью)

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

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

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

Еще после прыжка! Продолжить чтение ниже ↓

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

.outer {
      overflow: auto;
    }
Скриншот поля с рамкой, где граница очищает плавающий элемент
С использованием overflow: auto заставляет коробку содержать поплавок. (Большой превью)

См. Pen Floats и BFC от rachelandrew (@rachelandrew) на CodePen.

См. Pen Floats и BFC от rachelandrew (@rachelandrew) на CodePen.

Причина, по которой переполнение работает таким образом, заключается в том, что при использовании любого значения, отличного от начального значения visible создает контекст форматирования блока, и одна из особенностей BFC заключается в том, что он содержит поплавки.

BFC — это мини-макет в вашем макете

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

BFC предотвращает разрушение полей

Понимание схлопывания полей — еще один недооцененный навык CSS. В следующем примере у меня есть div с серым фоном.

Внутри этого div есть два абзаца. Внешний элемент div имеет нижний край в 40 пикселей; абзацы также имеют верхнее и нижнее поле по 20 пикселей.

.outer {
       background-color: #ccc;
      margin: 0 0 40px 0;
    }

    p {
      padding: 0;
      margin: 20px 0 20px 0;
      background-color: rgb(233,78,119);
      color: #fff;
    }

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

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

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

.outer {
       background-color: #ccc;
      margin: 0 0 40px 0;
      overflow: auto;
    }
Коробка с серым фоном, абзацы имеют поля сверху и снизу.
С контейнером поля BFC не разрушаются. (Большой превью)

См. крах маржи Pen BFC от rachelandrew (@rachelandrew) на CodePen.

См. крах маржи Pen BFC от rachelandrew (@rachelandrew) на CodePen.

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

BFC останавливает обтекание содержимого.

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

<div class="outer">
      <div class="float">I am a floated element.</div>
      <div class="text">I am text</div>
    </div>

Элемент с классом float перемещается влево, поэтому текст в div, который появляется после него, обтекает float.

Скриншот коробки с рамкой, внутри плавающий элемент с обтеканием текста
Текст обтекает плавающий элемент. (Большой превью)

Я могу предотвратить такое поведение переноса, сделав div, оборачивающий текст, BFC.

.text {
      overflow: auto;
    }
Скриншот блока с рамкой, текст не обтекает плавающий элемент
Div, содержащий текст, теперь является BFC, поэтому текст не переносится. (Большой превью)

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

См. Pen A BFC, предотвращающий обертывание поплавков. автор rachelandrew (@rachelandrew) на CodePen.

См. Pen A BFC, предотвращающий обертывание поплавков. автор rachelandrew (@rachelandrew) на CodePen.

Что еще создает BFC?

В дополнение к использованию overflow для создания BFC некоторые другие свойства CSS создают BFC. Как мы видели, плавание элемента создает BFC. Таким образом, ваш плавающий элемент будет содержать что-либо внутри него.

С использованием position: absolute или position: fixed на элементе.

С использованием display: inline-block, display: table-cell или display: table-caption. То table-cell и table-captions являются значениями по умолчанию для этих HTML-элементов, поэтому, например, если у вас есть таблица данных, каждая ячейка создаст BFC.

С использованием column-span: all, который используется для охвата столбцов многоколоночного макета. Элементы Flex и Grid также создают что-то вроде BFC, за исключением того, что они описываются как Контекст форматирования Flex и Контекст форматирования сетки соответственно. Это отражает тип макета, в котором каждый участвует. Контекст блочного форматирования указывает, что элемент участвует в блочном макете, контекст форматирования Flex означает, что элемент участвует в макете Flex. На практике результат тот же: плавающие элементы содержатся, а поля не схлопываются.

Новый способ создания BFC

Есть две проблемы с использованием переполнения или какого-либо другого метода для создания BFC. Во-первых, эти методы имеют побочные эффекты, основанные на том, для чего они действительно были разработаны. Метод переполнения создает BFC и содержит плавающие элементы, однако в некоторых сценариях вы можете обнаружить, что у вас появляется нежелательная полоса прокрутки или обрезаются тени. Это связано с тем, что свойство переполнения предназначено для того, чтобы вы могли сообщить браузеру, что делать в ситуации переполнения — вызывать полосу прокрутки или обрезать содержимое. Браузер делает именно то, что вы ему сказали!

Даже в ситуациях, когда вы не получаете каких-либо нежелательных побочных эффектов, использование переполнения может сбить с толку другого разработчика. Почему для переполнения установлено значение авто или прокрутка? Каковы были намерения первоначального разработчика? Им нужны полосы прокрутки в этом компоненте?

Что было бы полезно, так это метод создания BFC, который в противном случае был бы инертным, не вызывая другого поведения, кроме создания этого мини-макета, и возможность безопасного выполнения вещей внутри него. Этот метод не вызовет никаких непредвиденных проблем, а также позволит прояснить, что задумал разработчик. Рабочая группа CSS подумала, что это тоже может быть очень удобно, и поэтому у нас есть новое значение display имущество — flow-root.

Вы бы использовали display: flow-root в любой из описанных в этой статье ситуаций, когда создание нового BFC было бы выгодно — для содержания плавающих элементов, для предотвращения схлопывания полей или для предотвращения того, чтобы элемент обертывал плавающий элемент.

Вы можете увидеть все это в CodePen ниже, если у вас есть браузер, который поддерживает display: flow-root например, обновленный Firefox или Chrome.

См. Pen Using display: flow-root для общих задач от rachelandrew (@rachelandrew) на CodePen.

См. Pen Using display: flow-root для общих задач от rachelandrew (@rachelandrew) на CodePen.

Поддержка браузера для отображения: поток-корень

Могу ли я использовать display:flow-root. (Большой превью)

Поддержка браузерами этого значения ограничена, но увеличивается, и если вы считаете, что это удобно, идите и проголосуйте за него в Edge. Однако, даже если вы не можете прямо сейчас использовать удобную функцию flow-root в своем коде, теперь вы понимаете, что такое BFC и что вы делаете, когда используете переполнение или какой-либо другой метод для содержания поплавков. Понимание того факта, что BFC остановит элемент, обертывающий float, например, очень полезно, если вы хотите создать запасной вариант для гибкого макета или макета сетки в не поддерживающих браузерах.

Вы также понимаете кое-что довольно фундаментальное с точки зрения того, как веб-страницы отображаются в браузере. Хотя сами по себе они кажутся несущественными, именно эти небольшие знания могут ускорить время, необходимое для создания и отладки макетов CSS.

Сокрушительная редакция
(ык, иль)




Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Понимание макета CSS и контекста форматирования блоков

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

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

Ваш адрес email не будет опубликован.

Краткое описание по статье Понимание макета CSS и контекста форматирования блоков

Название: Понимание макета CSS и контекста форматирования блоков . Краткое описание: ⭐ Рэйчел Энд . Дата публикации: 29.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»