Понять макет CSS и BFC

CSS

Переводчик: Front-end Xiaozhi

оригинал:woohoo.smashing magazine.com/2017/12/UN’s…

Ставь лайк и смотри, поиск в WeChat【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статьяGitHub GitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

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

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

Чтобы читать больше качественных статей, пожалуйстаПосетите блог GitHub, Сотни качественных статей ждут вас каждый год!

Что такое БФК

В CSS-рендеринге веб-страницы контекст блочного форматирования размещается в соответствии с блоками на уровне блоков. W3C определяет BFC следующим образом:

Плавающие и абсолютно позиционированные элементы, контейнеры блочного уровня для блоков неблочного уровня (таких как встроенные блоки, ячейки таблицы и заголовки таблиц) и блоки блочного уровня, значение переполнения которых не является «видимым», создаются для их содержимое Новый BFC (контекст формата блочного уровня).

BFC — это независимая среда компоновки, в которой внешний мир не влияет на компоновку элементов, а в BFC блоки блоков и блоки строк (блоки строк состоят из всех встроенных элементов в строке) будут располагаться вертикально вдоль его расположение границ родительского элемента.

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

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

// css
.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 hack, он вставляет элемент под текстом и изображением и устанавливает для него значениеclear:both. Другой способ - использоватьoverflowсвойство, значение которого не является значением по умолчаниюvisible.

.outer {
  overflow: auto;
}

图片描述

Посмотреть демо

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

BFC — это мини-макет внутри макета.

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

BFC может предотвратить коллапс маржи

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

этоdivсодержит два тегаp. внешнего элемента divmargin-bottom40px, меткаpверх и низmarginОба 20 пикселей.

// html
<div class="outer">
  <p>I am paragraph one and I have a margin top and bottom of 20px;</p>
  <p>I am paragraph one and I have a margin top and bottom of 20px;</p>
</div>
  
// css
.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Между полями на двух ничего нет, поэтому два рухнут, поэтомуpв конце концов сdivверх и низ ровные. мы вpВы не можете видеть серый цвет выше и ниже него.

图片描述

В CSS поля двух соседних блоков (родственных или предков) могут быть объединены в одно поле. Такой способ объединения полей называется свертыванием, а результирующие комбинированные поля называются сворачивающимися полями. Результат складывания рассчитывается по следующим правилам:

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

Обязательное условие для создания складок: поля должны быть непрерывными!

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

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

图片描述

Посмотреть демо

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

BFC может предотвратить закрытие элементов плавающими элементами.

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

<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;
}

图片描述

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

Посмотреть демо

Использование BFC в макете с несколькими столбцами

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

Например:

<div class="container">
    <div class="column">column 1</div>
    <div class="column">column 2</div>
    <div class="column">column 3</div>
</div>

Соответствующий CSS:

.column {
    width: 31.33%;
    background-color: green;
    float: left;
    margin: 0 1%;
}
.column:last-child {
  float: none;
}

Перед созданием BFC:

clipboard.png

Добавьте следующие стили, чтобы создать BFC:

.column:last-child {
  float: none;
  overflow: hidden; 
}

clipboard.png

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

Что еще может создать BFC?

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

BFC могут быть созданы следующими способами

  • Значение float не равно none.
  • Значение position не является статическим или относительным.
  • Значение display: inline-block, table-cell, flex, table-caption или inline-flex.
  • Значение переполнения не видно

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

Есть две проблемы с созданием BFC с использованием переполнения или других методов. Во-первых, эти методы разработаны сами по себе, поэтому их использование для создания BFC может иметь побочные эффекты. Например, при использовании переполнения для создания BFC в некоторых случаях может появиться полоса прокрутки или обрезаться содержимое элемента.

Это связано с тем, что атрибут переполнения предназначен для того, чтобы вы могли сообщить браузеру, как определить состояние переполнения элемента. Браузер реализует свое самое основное определение.

Даже без каких-либо нежелательных побочных эффектов используйтеoverflowЭто также может сбить с толку других разработчиков. ЗачемoverflowУстановить какautoилиscroll• Каковы были намерения исходного разработчика? Хотели ли они полосы прокрутки в этом компоненте?

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

поддержка браузера flow-root

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

图片描述

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

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

Ваши лайки - моя мотивация продолжать делиться хорошими вещами, ставьте лайки!

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.

Категории