«Опыт интервью» — четыре года переднего плана на коленях в CSS-интервью/(ㄒoㄒ)/~~

опрос
«Опыт интервью» — четыре года переднего плана на коленях в CSS-интервью/(ㄒoㄒ)/~~

Четыре года фронтенда, стоящего на коленях перед CSS-интервью, просто невероятно!

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

.clearfix::after {
    content: '';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}

Изначально я думал, что интервьюер тоже спросит об этих методах, я уже придумал несколько методов в уме. Неожиданно интервьюер спросил меня, этот метод очищает принцип плавания.

принцип!当时我就有点懵逼，这个方法很常见，也经常在用，但是就没去理解过其原理。脑子在飞快的运转。

  • первый::afterявляется псевдоэлементом элемента после элемента;
  • contentявляется содержимым псевдоэлемента, если он пуст, он должен просто сделать так, чтобы псевдоэлемент не отображался, иdisplay:block;height:0Чтобы высота псевдоэлемента была равна нулю и не отображалась, это не должно иметь ничего общего с очисткой поплавка.
  • Кроме тогоvisibility: hidden, заключается в том, чтобы позволить браузеру псевдоэлементов отображать, но не отображать, и это не должно иметь большого отношения к очистке плавающего элемента.
  • Затем остальныеclear: both, я не знаю, что это значит, но используя метод исключения, это должно быть ключом к очистке поплавка.

Так что я ответил расплывчато, даclear: bothЭто свойство сработало. Но лицо интервьюера сказало мне, что его не удовлетворил мой ответ.

Позже он снова позвонил мне, чтобы кратко рассказать о том, что такое BFC и чем он занимается. Я только слышал о KFC, а где я слышал о BFC, я сейчас совсем запутался. Обычно на работе большинство из них пишут код JS и редко работают с CSS.

Хотя меня приняли позже, зарплата упала на 2К, что не оправдало ожиданий. Можно только очень пожалеть.

Вернитесь домой, проверьте информацию в Интернете, сделайте резюме, поделитесь ею.

CSS还是前端的基本功，不管你有多年工作经验！！！别认为只有在初级前端面试中才会问CSS，警戒！！

Во-первых, чтобы очистить плавающий принцип

Вот так,clear:bothЭто действительно ключ к очистке поплавка, меня одурачили.

clear— это свойство позиционирования в CSS, которое указывает, какая сторона элемента не позволяет использовать другие плавающие элементы. Такclear:bothОговорено, что плавающие элементы не допускаются слева и справа.

clearАтрибуты можно использовать только для элементов блочного уровня, что очевидно для плавающих стилей.display:blockэффект.

Кроме тогоvisibility: hidden;height: 0;если толькоcontentЗначение пустое. Не важно, пишешь ты или нет.

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

<style>
.wrap {
    width: 200px;
    border: 1px solid #333;
}
.wrap:after {
    content: '';
    display: block;
    clear: both;
}
.left {
    float: left;
    background: blue;
    height: 100px;
    width: 100px;
}
.right {
    float: left;
    background: red;
    height: 50px;
    width: 100px;
}
</style>
<body>
    <div class='wrap'>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

Для ясности в стиле .wrap:aftercontentУстановить какcontent: 'after伪元素', как показано на рисунке ниже.

Затем добавьте его в стиль .wrap:after.clear:bothУказательный элемент после левой и правой стороны пуховых элементов не разрешается плавать, нет опции, а для после того, как Pseud-элемент, расположенный ниже, в это время, как показано ниже.

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

Затем мы помещаем стиль .wrap:after вcontentУстановить какcontent:' ', и, наконец, как показано на рисунке ниже.

Во-вторых, концепция и применение BFC

1. Концепция БТЭ

Полное название BFC — контексты форматирования блоков.

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

2. Правила рендеринга BFC

Тогда BFC — это контейнер, который решает, как отображать элемент. Что нам нужно понять, так это его правила рендеринга.

  • 1. Внутренние элементы блочного уровня будут размещены один за другим в вертикальном направлении.
  • 2. Вертикальное расстояние блочных элементов определяется отступом. Поля двух соседних элементов блочного уровня, принадлежащих одному и тому же BFC, будут перекрываться.
  • 3. При форматировании слева направо левый край каждого элемента (блочного и встроенного элементов) касается левого края содержащего его блока (обратное верно для форматирования справа налево). Это верно, даже если элемент в содержащем блоке имеет числа с плавающей запятой, если только элемент в нем снова не генерирует BFC.
  • 4. Область БТЧ не будет перекрываться плавающими элементами.
  • 5. BFC — это изолированный и независимый контейнер, и дочерние элементы внутри контейнера и элементы снаружи не влияют друг на друга.
  • 6. При расчете высоты контейнера БТЭ в расчете также участвует плавающий элемент.

3. Подробное объяснение правил рендеринга BFC

3.1 Правило 2

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

<body>
    <div style="width:100px;height:100px;background:red;margin:20px;"></div>
    <div style="width:100px;height:100px;background:blue;margin:20px;"></div>
</body>

Согласно коду стиля, расстояние между красным блоком и синим блоком должно быть 40 пикселей. Но на самом деле это 20px. Это второй пункт правил рендеринга BFC.

Поскольку одним из условий срабатывания BFC является корневой элемент html, красный блок и синий блок являются соседними элементами блочного уровня в одном и том же HTML-контейнере корневого элемента, и их поля будут перекрываться, поэтому расстояние между красным блоком и синим блоком составляет всего 20 пикселей.

3.2 Правило 3

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

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

Содержащий блок может быть блоком, содержащим содержимое блока, или блоком, содержащим заполнение блока. Это зависит от элементов, содержащихся в содержащемся блокеpositionАтрибуты.

Например, если элементpositionсобственностьabsolute, содержащий блок определяется своим ближайшимpositionЗначение неstaticЗаполнение родительского элемента состоит из содержащего блока.

В другом примере, если элементpositionсобственностьstaticилиrelative, содержащий блок — это блок, содержащийся в содержимом его родительского элемента.

если элементpositionсобственностьfixed , содержащий блок является окном просмотра.

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

Нормальные элементы форматирования располагаются слева направо, затем элементыpositionсобственностьabsolute,rightравно 0 или поэлементноfloatАтрибут правый, тогда форматирование справа налево, а правый край элемента касается правого края содержащего его блока.

Элемент H запускает генерацию BFC, которая состоит из двух элементов A и элемента B, элементов A.float, то левый край элемента A касается левого края элемента H (который также является содержащим блок элемента A).floatСвойство также левое, левый край элемента B не касается левого края элемента H, но касается правого края элемента A. Эту ситуацию можно объяснить правилом «даже если элемент в содержащем блоке всплывает, если только элемент в нем не генерирует BFC», т.е.floatСвойство не быть никем вызовет генерацию BFC, так что эта ситуация не противоречива.

3.3 Правило 4

Это самое важное правило рендеринга BFC, которое можно использовать для решения многих проблем компоновки.

3.4 Правило 5

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

4. Условия срабатывания BFC

  • корневой элементhtml
  • floatЗначение неnone.
  • positionЗначение неstaticилиrelative.
  • displayЗначениеinline-block,inline-flex,flex, flow-root,table-caption,table-cell.
  • overflowЗначение неvisible.

5. Применение БФК

1. Очистить поплавок

В начале статьи упоминалось, чтоclear:bothДля очистки floating мы также можем очистить float согласно пункту 6 правил рендеринга BFC (при вычислении высоты контейнера BFC в расчете также участвует плавающий элемент), чтобы решить проблему коллапса высоты.

2. Решить проблему с верхними и нижними полями

<body>
    <div style="width:100px;height:100px;background:red;margin:20px;"></div>
    <div style="width:100px;height:100px;background:blue;margin:20px;"></div>
</body>

Мы используем пункт 2 правила рендеринга BFC (поля двух соседних элементов блочного уровня, принадлежащих одному и тому же BFC, будут перекрываться), затемНе принадлежитПоля двух соседних элементов блочного уровня одного и того же BFC равныне случитсяперекрытие.

Затем мы оборачиваем элемент div во второй элемент div и используемoverflow:autoАктивируйте его BFC. Проверьте еще раз, чтобы убедиться, что эффект не перекрывается.

<body>
    <div style="width:100px;height:100px;background:red;margin:20px;"></div>
    <div style="overflow:auto">
        <div style="width:100px;height:100px;background:blue;margin:20px;"></div>
    </div>
</body>

3. Внедрите адаптивную двухколоночную верстку

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

Вот способ написания правил рендеринга с использованием BFC.

<style>
    .main{
        background: red;
        height:500px;
    }
    .sider {
        float: left;
        width: 20%;
        height:300px;
        background: blue;
    }
</stley>
<body>
    <div class="sider">我是侧边栏</div>
    <div class="main">我是主体内容</div>
<body>

Прежде всего, согласно правилу 1, мы должны сначала поставить.sider divнаписать на.main divПередний. это.sider divЯ буду плавать на нем.main divнад.

Затем по правилу 4 (площадь БТЧ не будет перекрываться с плавающим элементом) дать.mainплюсoverflow:auto;вызывать.main divСгенерировать БФС.

В-четвертых, концепция и применение IFC

1. Концепция ИФК

Полное название IFC — контексты встроенного форматирования, то есть «контекст встроенного форматирования».

2. Условия генерации ИЧХ

Условия формирования IFC очень просты.Элементы уровня блока содержат только элементы встроенного уровня.Следует отметить, что когда элемент уровня блока вставляется в IFC, будут созданы два анонимных блока для разделения родительских элементов, в результате два IFC.

3. Правила рендеринга IFC

  • Дочерние элементы располагаются по горизонтали и по горизонтали, а начальная точка по вертикали — вершина элемента.
  • Дочерний элемент будет вычислять только пространство стиля по горизонтали, [padding, border, margin], а пространство стиля по вертикали не будет рассчитываться, [padding, border, margin].
  • В вертикальном направлении субременты выровнены в разных формах (вертикально-выравнивание)
  • Прямоугольная область, которая полностью охватывает блоки на линии, называется линейным блоком линии. Ширина линейного блока определяется содержащим его блоком и поплавком внутри него.
  • «Линейный блок» в IFC обычно прикрепляется к содержащему его блоку слева и справа, но элементы с плавающей запятой имеют приоритет.
  • Высота «строки» в IFC определяется правилами расчета высоты строки CSS, и высота нескольких строк в одной и той же IFC может быть разной.
  • Когда общая ширина блоков встроенного уровня меньше, чем содержащий блок строки, их правила горизонтального рендеринга определяются значением свойства text-align.
  • Когда «встроенный блок» превышает ширину родительского элемента, он разделяется на несколько блоков, которые распределяются по нескольким «блокам строки». Если дочерний элемент не имеет принудительного переноса строк, «встроенное поле» не будет разделено и переполнит родительский элемент.

4. Применение МФК

  • Горизонтально по центру: когда блок должен быть центрирован по горизонтали в среде, установка для него значения встроенный блок создаст IFC во внешнем слое, а выравнивание текста может сделать его центрированным по горизонтали.
  • Вертикальное центрирование: создайте IFC, используйте один из элементов, чтобы растянуть высоту родительского элемента, а затем установите его вертикальное выравнивание: среднее, и другие встроенные элементы могут быть центрированы по вертикали под этим родительским элементом.

5. Концепция и применение FFC

1. Концепция ФФК

Полное название FFC — контексты форматирования Flex, эластичная блочная модель.

2. Условия генерации ФЧХ

Настройки родительского элементаdisplay:flexИли `Дисплей: встроенный гибкий

3. Правила рендеринга FFC`

можно смотретьУчебное пособие по Flex Layout от Ruan Yifeng: грамматика, очень подробно.

Будь осторожен. После создания FFC атрибуты float, clear и vertical-align его дочерних элементов станут недействительными.

4. Применение ФФК

1, автоматическая высота страницы отвлечения, нижняя полоса всегда появляется в нижней части страницы

<style>
.wrap{
    display:flex;
    padding:0;
    margin:0;
    min-height:100vh;
    flex-direction:column;
}
.main{
    flex-grow:1;
}
</style>
<body class="wrap">
    <header style="line-height:50px;background:red;color:#fff;text-align:center">头部</header>
    <main class="main">内容</main>
    <footer style="line-height:50px;background:#eeeeee;color:#333;text-align:center">底栏</footer>
</body>

2. Классический макет Святого Грааля

<style>
.wrap {
    display: flex;
    padding: 0;
    margin: 0;
    min-height: 100vh;
    flex-direction: column;
}
header,
footer {
    flex: 0 0 50px;
}

.content {
    display: flex;
    flex: 1
}

.main {
    flex: 1;
}
.nav,
.ads{
    flex: 0 0 100px;
    background:green;
}
.nav{
    order:-1;
    background:yellow;
}
</style>
<body class="wrap">
    <header style="line-height:50px;background:red;color:#fff;text-align:center">头部</header>
    <div class="content">
        <main class="main">内容区</main>
        <nav class="nav">侧边导航</nav>
        <aside class="ads">侧边栏</aside>
    </div>
    <footer style="line-height:50px;background:#eeeeee;color:#333;text-align:center">底栏</footer>
</body>

следовать за

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

Категории