Что такое BFC для продвижения переднего плана? Каков принцип БФУ? Как создать БФУ?

CSS
  • Автор: Чен Даютоу
  • гитхаб:KRISACHAN

коробочная модель

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.

Блочная модель CSS описываетЭлементы в дереве документаи соответствующийвизуальная модель форматированияПолучилась прямоугольная коробка.

Базовая блочная модель (базовая блочная модель CSS)

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

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

?('*').forEach(e => {
  e.style.border = '1px solid';
})

Схема выглядит следующим образом:

визуальная модель форматирования

CSSизвизуальная модель форматированияосновывается наБазовая блочная модель (базовая блочная модель CSS)БудудокументацияФактический алгоритм, который преобразует элементы в ящике из ящика в ящик.

Официальное заявление:Он указывает, как клиент обрабатывает дерево документов в среде.

Компоновка каждой коробки определяется следующими факторами:

  • размер коробки
  • Тип коробки:Встроенное поле (встроенное),блоки встроенного уровня,Блок атомарного встроенного уровня,блочный блок
  • позиция:нормальный поток,плавать,абсолютное позиционирование
  • текущее поле в дереве документовдочерний элементилиродственный элемент
  • окно просмотраизразмера такжеМесто нахождения
  • фотографии внутри коробкиразмер
  • какой-то другой внешний фактор

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

Примеры следующие:

<div>
    <table>
        <tr>
            <td>hi</td>
        </tr>
    </table>
</div>

Возьмите приведенный выше код в качестве примера,divа такжеtableвсе содержат блоки.divдаtableсодержащий блок, в то время какtableОпять такиtdСодержащий блок не является абсолютным.

Графика: (картинка изw3help):

Генерация ящиков

Поколение коробкиМодель визуального форматирования CSSчасть для создания блоков из элементов документа. Тип коробки зависит отCSS displayАтрибуты.

контекст форматированияэто определениеКоробка окружающей средыправила, разныеконтекст форматированияНижние ящики ведут себя иначе.

Вот определения понятий, связанных с коробкой:

  • элемент блочного уровня

    • когда элементdisplayдляblock,list-itemилиtable, это элемент блочного уровня.

  • коробка блочного уровня

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

  • анонимный ящик

    • В некоторых случаях, когда требуется визуальное оформление, необходимо добавить дополнительные поля, которые нельзяCSS 选择器Выбрано, то есть все наследуемые значения свойств CSSinherit, в то время как все ненаследуемые значения свойств CSSinitial. так называемыйанонимные ящики.

  • встроенный элемент

    • когда элементdisplayдляinline,inline-blockилиinline-table, это элемент встроенного уровня.
    • При отображении он может отображаться как несколько строк с другим содержимым встроенного уровня.

  • встроенный блок

    • Элементы встроенного уровня генерируют блоки встроенного уровня, которые также участвуют в行内格式化上下文（inline formatting context）создание.

  • анонимный встроенный ящик

    • Подобно блочным блокам, механизмы CSS иногда автоматически создают некоторые встроенные блоки. Эти встроенные поля не могут быть выбраны селекторами, поэтому они анонимны, они наследуют эти наследуемые свойства от родительского элемента, другие свойства сохраняют свои значения по умолчанию.initial.

  • поле строки

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

  • окно запуска (удалено в стандарте CSS 2.1)

    • Коробка обката может пройтиdisplay: run-inустановить, это может быть либо блок-бокс, либо встроенный блок, в зависимости от типа блока, стоящего за ним.

BFC(Block formatting contexts)

BFCЭто понятие происходит отвизуальная модель форматированиясерединаНормальный поток.

определение

Плавающие элементы, абсолютно позиционированные элементы, элементы, чей атрибут display имеет значение «inline-block», «table-cell», «table-caption», и элементы, чье «переполнение» не является «видимым», создадут новыеBFC(Block formatting contexts).

Обратите внимание, что эти элементы создают контекст форматирования блока, сами по себе они не являются контекстом форматирования блока.

Представление

существуетBFC(Block formatting contexts)в, всодержащий блокОдин ящик и один ящик расположены вертикально без перекрытия, и прямое расстояние по вертикали между двумя соседними ящиками определяется какmarginПринимать решение.плаватьТо же самое (хотя возможно, что расстояние между двумя ящиками будетfloatsи становится меньше), если ящик не создаст новыйBFC.

Примечание Fish Head: Проще говоря, BFC — это независимая коробка, которая не мешает внешнему миру и не вызывает беспокойства из внешнего мира (/ ω＼).

Расчеты на уровне блоков

Блочные и незаменяемые элементы в обычном потоке

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right'= ширина содержащего блока

Приведенное выше правило расчета основано наwriting-mode: ltrДругими словами, если это другой порядок записи, он будет рассчитан в соответствии с этим порядком.

если "ширина" неautoи «граница-левая-ширина» + «отступ-слева» + «ширина» + «отступ-справа» + «граница-справа-ширина» (плюс «поле-лево» или «поле-справа», которое не является «автоматическим» ' ') больше, чем ширина содержащего блока, любое значение «auto» для «margin-left» или «margin-right» будет рассматриваться как ноль для следующих правил.

Если для ширины установлено значениеauto, то все остальныеautoзначение станет0.

Если ширина установлена ​​наauto, то любой другойautoзначение станет0, и ширина будет следовать, чтобы поле было заполнено.

если'margin-left'а также'margin-right'как дляauto, элемент центрируется по горизонтали относительно края содержащего блока.

Плавающие и незаменяемые элементы

если'margin-left'а также'margin-right'как дляauto, то их удельные значения равны0.

Если ширинаauto, затем используйтеshrink-to-fitШирина метода расчета (CSS 2.2 не определяет точный алгоритм).

потомshrink-to-fitГрубый расчет таков:min(max(preferred minimum width, available width), preferred width).

Абсолютное позиционирование и незаменяемые элементы

«левая» + «поле-лево» + «граница-левая-ширина» + «отступ-слева» + «ширина» + «отступ-справа» + «граница-справа-ширина» + «поле-справа» + «право» '= ширина содержащего блока

если'left','width'а также'right'обе'auto', Первый'margin-left'а также'margin-right'из'auto'установлено значение0.

если'left','width'а также'right'ни один'auto', он рассчитывается в соответствии с фактическим значением.

если'margin-left'а также'margin-right'как для0, то согласно'left','width'а также'right'Является ли значение'auto'вычислять. еслизначение направления,'width'Значение'auto',а также'другое значение направления'Нет, ширина используетсяshrink-to-fitАлгоритм. Если значение'auto'а два других значения не учитываются, используется значениеshrink-to-fitвычислять.

Приведенное выше правило расчета основано наwriting-mode: ltrДругими словами, если это другой порядок записи, он будет рассчитан в соответствии с этим порядком.

Примечание рыбьей головы: здесь есть особая точка, вMDNflexbox и gridbox по-прежнему учитываются в BFC, но в последней спецификации они были отделены от BFC и стали независимым модулем CSS, содержание которого выглядит следующим образом:

  1. CSS Flexible Box Layout Module Level 1
  2. CSS Grid Layout Module Level 2

Если вам нравится обсуждать технологии или у вас есть какие-либо комментарии или предложения по этой статье, вы можете добавить друзей Yutou в WeChat для совместного обсуждения.Конечно, Yutou также надеется поговорить с вами о жизни, хобби и поболтать. WeChat ID Fish Head: krisChans95

Категории