Интервьюер: Скажите, пожалуйста, что такое BFC? говори четче

CSS
Интервьюер: Скажите, пожалуйста, что такое BFC? говори четче

Какой к черту БФК?

BFCПолное имя:Block Formatting Context, названный «контекст форматирования на уровне блоков».

W3CОфициальное объяснение:BFCОн определяет, как элемент позиционирует свое содержимое, а также его отношения и взаимодействие с другими элементами, а когда дело доходит до визуального макета,Block Formatting Contextобеспечивает среду,HTMLВёрстка в этой среде по определённым правилам.

Проще говоря,BFCЭто полностью независимое пространство (среда макета), так что дочерние элементы в пространстве не будут влиять на макет снаружи. Итак, как использоватьBFCШерстяная ткань,BFCможно рассматривать какCSSатрибут элемента

Как активировать BFC

Вот лишь несколько триггеровBFCв использованииCSSАтрибуты

  • overflow: hidden
  • display: inline-block
  • position: absolute
  • position: fixed
  • display: table-cell
  • display: flex

Правила БФК

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

Какую проблему решает BFC

1. Используйте Float, чтобы выйти из потока документов, свернуть высоту

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高度塌陷</title>
    <style>
        .box {
            margin: 100px;
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
        .container {
            background: #000;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

Эффект:

Видно, что вышеуказанный эффект даетboxнаборfloatрезультаты из документооборота, в результате чегоcontainerВысота не растягивается, поэтому цвет фона не имеет цвета.Решение этой проблемы может датьcontainerкурокBFC, триггер, о котором мы упоминали вышеBFCможно задать свойства.

Изменить код

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高度塌陷</title>
    <style>
        .box {
            margin: 100px;
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
        .container {
            background: #000;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

Эффект:

2. Перекрытие полей поля

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            margin: 10px;
            width: 100px;
            height: 100px;
            background: #000;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

Эффект:

Вы можете видеть, что у нас есть два поля вышеmarginПоля установлены на10px, результат показывает, что существует только10pxрасстояние, что приводит кmarginСвернуть проблему, на этот разmarginРезультатом поля является максимальное значение, а не подгонка, для решения этой проблемы вы можете использоватьBFCПравила (обертывание блока для элементов, чтобы сформировать полностью независимое пространство, чтобы элементы внутри не влияли на внешний макет), или простой и грубый способ установитьmargin, настройкаpadding.

Изменить код

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Margin边距重叠</title>
    <style>
        .box {
            margin: 10px;
            width: 100px;
            height: 100px;
            background: #000;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <p><div class="box"></div></p>
    </div>
</body>
</html>

Эффект:

3. Двухколоночный макет

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两栏布局</title>
    <style>
            div {
                 width: 200px;
                 height: 100px;
                 border: 1px solid red;
            }

    </style>
</head>
<body>
    <div style="float: left;">
        两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局
    </div>
    <div style="width: 300px;">
        我是蛙人，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭
    </div>
</body>
</html>

Эффект:

Вы можете видеть вышеперечисленные элементы, второйdivэлемент300pxширина, но заменяется первымdivнастройки элементаFloatВне документооборота для покрытия, для решения этого метода мы можем поставить второйdivэлемент установлен вBFC.

Изменить код

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两栏布局</title>
    <style>
            div {
                 width: 200px;
                 height: 100px;
                 border: 1px solid red;
            }

    </style>
</head>
<body>
    <div style="float: left;">
        两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局
    </div>
    <div style="width: 300px;display:flex;">
        我是蛙人，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭
    </div>
</body>
</html>

Эффект:

Эпилог

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

Я водолаз (✿◡‿◡), если вы считаете, что писать можно, ставьте лайк ❤.

Заинтересованные друзья могут присоединиться[Группа обмена развлекательными кругами]Приветствую всех для обсуждения

Писать нелегко,"Мне нравится" + "Смотрел" + "Ретвитнуть"Спасибо за вашу поддержку ❤

Хорошие статьи в прошлом

"Поделитесь 15 полезными плагинами для Webpack! ! ! 》

«Научит вас писать компонент Vue, который публикуется в npm и может быть импортирован и использован вне цепочки»

"Поделитесь 12 загрузчиками, обычно используемыми в Webpack"

«Поговорим о том, что такое CommonJs и Es Module и чем они отличаются»

«Карта с простым пониманием структуры данных»

«Знаете ли вы все приемы JavaScript, используемые в этих работах? 》

«[Рекомендуемая коллекция] Расскажите о некоторых часто используемых командах Git и о том, как решать особые сценарии проблем»

Ссылаться на

blog.CSDN.net/WeChat_4321…

blog.CSDN.net/День мертвых_36422…

Категории