В интервью часто спрашивают оBFCПроблема, хотя онлайн-объяснение оBFCЕсть много статей и базовых теоретических знаний, хотя я многое приобрел, но столкнувшись с интервью, я не знаю, как ответить, и я не могу ответить на содержание, которое интервьюер хочет исследовать в ясной и простым способом, который легко приведет к тому, что я сам отвечу на все вопросы. 😭). Таким образом, здесь записано, что одно должно углубить понимание BFC, а другое - лучше ответить на интервью.
Связанные вопросы интервью
- Кратко опишите свое понимание спецификации BFC
- Понимание спецификации BFC (контекст форматирования блока: контекст форматирования блока)
- Как создать контекст форматирования блока (контекст форматирования блока), какая польза от BFC
- Понимание спецификации BFC?
- так далее
Хотя вышеперечисленные темы кажутся разными, на самом деле конечные пункты исследования одни и те же, нам нужно только разделить их на什么是BFC,BFC有什么作用а также如何创建BFCНа дополнительные вопросы может ответить Yiyi.
Что такое BFC? (Что)
Как спросить BFC на собеседовании, давайте сначала ответим на него
什么是BFC.
BFC называется контекстом форматирования на уровне блоков и представляет собой механизм рендеринга в CSS. Это коробка с независимой областью рендеринга (также известная как чары), которая указывает, как расположены внутренние элементы, и внутренние элементы коробки и внешние элементы не влияют друг на друга.
Соответствует IFC, GFC и FFC (представлены последние два CSS3)
Что делает BFC? (Почему)
выше мы знаемBFCМакет, отрисовывающий элементы интерьера, давайте посмотрим на документы спецификации CSS, посмотримBFCКаковы правила:
правила документа
- В контексте блочного форматирования блоки размещаются вертикально один за другим, начиная с верхней части содержащего блока.
- Расстояние по вертикали между двумя одноуровневыми блоками определяется выражением
marginатрибутивное решение. - Вертикальные поля объединяются между соседними блоками уровня блока в одном и том же контексте форматирования блока.
- В том же контексте блочного форматирования левый внешний край каждого блока находится рядом с левым внешним краем содержащего блока (для форматирования справа налево правые внешние края находятся рядом друг с другом).
- Область BFC не будет перекрывать флоат-бокс.
- При расчете высоты БФК в расчете также участвуют плавающие элементы.
Подробные правила можно посмотреть9.4.1 Контекст форматирования блока
Диаграмма правил
Правило 1 и правило 2 должно быть легко понять, поэтому я не буду описывать их здесь, если вы не понимаете, возможно, вы выучили поддельный CSS. 😂
Вертикальные поля сливаются между соседними блоками на уровне блока в одном и том же контексте форматирования блока.
вот говоритmargin collapse, На самом деле существуют следующие ситуации, когда произойдет слияние: 1. Поля родитель-потомок 2. Поля брата 3. Элементы без высоты сами по себеmargin-topа такжеmargin-bottomбудут объединены.
Однако есть несколько вещей, на которые стоит обратить внимание:
- Требуются ящики, принадлежащие обычному потоку: То есть не высчитывается из документооборота
-
Рядом, поблизости: То есть элементы не
padding,border,clearа такжеline boxразделенный -
вертикальный: то есть
margin-topа такжеmargin-bottom
Эффект слияния полей возникает только при соблюдении вышеуказанных пунктов.
Как вы можете видеть на картинке выше, отец и сынmargin-topа такжеmargin-bottomПроизошло слияние. Как это решить? Активировать BFC элемента (Примечание. Ниже приведены все элементы набора.overflow:hiddenдля запуска), но здесь возникает вопрос, запускаем ли мы BFC родительского элемента или BFC дочернего элемента?
После экспериментов я обнаружил, что только запуск BFC родительского элемента может избежать слияния полей, а запуск BFC дочернего элемента не имеет никакого эффекта.
Здесь действие родительского элемента можно объяснить заимствованием стандарта:
Поля элементов, которые устанавливают новые контексты форматирования блока (например, плавающие элементы и элементы с «переполнением», отличным от «видимого»), не сворачиваются с их дочерними элементами в потоке. дистанционный стек)
Почему подэлемент триггера не вступил в силу? Здесь мы впервые рассмотрим слияние братьев.
Также происходит слияние полей, и здесь нет отношения родитель-потомок, поэтому давайте просто запустим BFC элемента, чтобы увидеть эффект.
Обнаружено, что слияние полей все еще происходит.Согласно правилам, хотя BFC для child1 срабатывает, можно сделать вывод, что два элемента все еще находятся в одном и том же BFC.
После вышеперечисленных экспериментов я пришел к не до конца признанному официалом выводу:
BFC влияет на внутренние элементы
- Например, в родительском и дочернем элементах установите для дочернего элемента значение BFC, потому что это влияет на внутреннюю часть, поэтому дочерний элемент все еще находится в том же BFC, что и номинальный.
- Среди братьев установка child1 в качестве BFC влияет на дочерние элементы child1, но child1 и child2 по-прежнему находятся в одном и том же BFC.
Таким образом, я могу использовать div для упаковки и запускать BFC div, чтобы он находился в другом BFC, чтобы избежать слияния полей.
Идеально! 🎉 мы можем избежать слияния полей, запустив BFC. Конечно, есть много способов избежать слияния полей, например, установитьborderи т.п.
Область BFC не будет перекрываться с флоат-боксом
Когда мы устанавливаем элемент как плавающий, элемент покидает поток документа и накладывается поверх элемента ниже.
И если элемент BFC установлен, он не будет перекрываться с float, поэтому мы можем использовать это свойство для достижения адаптивной двухколоночной верстки.
При расчете высоты БФК в расчете также участвует плавающий элемент
Поскольку плавающий элемент вырывается из потока документа, высота содержащего его блочного элемента не содержит плавающий элемент, что приводит к схлопыванию высоты. В BFC высота содержащего блока включает плавающий элемент.
По правилам + примеры дайте что делает БФЦ.
Как создать БФУ? (Как)
- корневой элемент, т.е.
html -
floatЗначение неnone -
overflowЗначение неvisible -
displayценностьinline-block,table-cell,table-caption -
positionценностьabsoluteилиfixed - так далее
Если что-то не так, пожалуйста, укажите, спасибо ~ 🖖Оригинальная ссылка
Так устал, это заняло почти 4 часа, я не сохранил это в первый раз, и написал это снова. 😭