每日一篇——23秋招CSS面经（1）

⭐BFC

带你用最简单的方式理解最全面的BFC_哔哩哔哩_bilibili

BFC，即块级格式化上下文（Block Formatting Context），是CSS中的一个概念。它是指一个独立的渲染区域，其中的元素按照一定的规则进行布局和渲染。

BFC的主要作用是控制元素在布局上的行为，包括外边距的塌陷、浮动元素对周围元素的影响以及清除浮动等。以下是BFC的一些特性和应用：

外边距折叠：在BFC中，垂直方向上的相邻元素的外边距会发生折叠（合并）现象，从而避免了不必要的间距。但在同一个BFC的元素中，父子元素之间的外边距不会发生折叠。
清除浮动：BFC可以包裹浮动元素，使其不对其他元素造成影响。通过创建一个新的BFC，可以清除浮动带来的高度塌陷问题。
阻止浮动元素重叠：在BFC中，浮动元素会受到BFC边界的限制，从而阻止其与其他元素的重叠。这有助于解决一些浮动布局导致的错位或溢出问题。
自适应两栏布局：BFC可以使用浮动或者overflow: hidden;等方式创建，结合盒模型和清除浮动，可以实现一些常见的布局需求，如自适应两栏布局。

创建BFC的方式有多种，包括：

给元素添加 float 属性。
给元素添加 display: inline-block;、display: table-cell;、display: table-caption; 等属性。
给元素添加 overflow 属性为除 visible 之外的值。

总而言之，BFC是一种控制元素布局行为的机制，它可以解决一些常见的布局问题，如外边距塌陷、浮动元素重叠等。了解BFC的使用和原理对于前端开发中复杂布局的实现非常有帮助。

⭐实现水平居中

行内元素：text-align:center
块级元素：
1. margin: 0 auto(确定宽度的情况下)
2. transform + 绝对定位
3. display:flex + justify-content:center
4. display:inline-block + text-align:center
5. display:table + margin:auto

⭐实现垂直居中

对于文字:设置line-height
flex + align-items
transform + 定位
display:table + verticle-align:middle

⭐水平垂直居中

① 使用Flexbox：通过将父容器设置为display: flex;，然后使用justify-content: center;和align-items: center;属性来水平和垂直居中子元素。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

② 使用Grid布局：通过将父容器设置为display: grid;，然后使用place-items: center;属性来水平和垂直居中子元素。

.parent {
  display: grid;
  place-items: center;
}

③ 使用绝对定位和transform属性：将子元素的位置设置为绝对定位，并且使用top: 50%;和left: 50%;将元素的左上角移动到父容器的中心，然后使用transform: translate(-50%, -50%);将元素的中心与父容器的中心对齐。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

④ 使用表格布局：将父容器设置为display: table;，然后将子元素设置为display: table-cell;和vertical-align: middle;以实现水平和垂直居中。

.parent {
  display: table;
}

.child {
  display: table-cell;
  vertical-align: middle;
}

⑤flex + margin:auto

⑥绝对定位均设0 + margin:auto

⭐圣杯布局&双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            思路：
                1、容器宽度设为100%来填充整个页面宽度
                2、为左右中三者设置float:left，以此可以显示在一行
                3、为left和right部分设置负的margin值，让它们移到center行中，但注意，现在的left和right将center左右部分覆盖了
                4、解决覆盖问题，有两种方式：
                    (1) 为center左右设置内边距，但这时会将页面撑大，所以我们要将内边距合并到100%的宽度里，这里我们想到了用怪异盒模型
                    (2) 用定位的方式解决，为容器wrapper设置内边距，然后为left和right设置相对定位，并为其移动到左右两边

            扩展：
                与双飞翼布局的区别？
                    圣杯布局通过设置负边距与容器内边距来使三栏显示于一列，而双飞翼布局则为中间列添加外边距来防止左右两侧遮挡，两者实现效果相似
        
        */
        .item {
            height: 100px;
            /* 这里设置浮动是为了让三者可以并排显示 */
            float: left;
        }

        .center {
            /* 为了防止左右两块与center重叠，我们要为其设置内边距 */
            /* padding: 0 300px; */
            /* 方式一：将盒子模型设为怪异盒模型，防止padding将左右顶开 */
            /* box-sizing: border-box; */
        }

        .center {
            width: 100%;
            background-color: green;
        }

        .wrap {
            padding:0 300px;
        }

        .left {
            width: 300px;
            background-color: yellow;
            /* 为了让left块和center在同一行，需要用负的margin值让它向回移动 */
            margin-left: -100%;
            /* 方式二：设relative */
            position: relative;
            left: -300px;
        }

        .right {
            width: 300px;
            background-color: red;
            /* 为了让right块和center在同一行，需要用负的margin值让它向回移动 */
            margin-left: -300px;
            /* 方式二：设relative */
            position: relative;
            right: -300px;
        }
    </style>
</head>
<body>
    <!-- 圣杯布局分左右中三部分 -->
    <div class="wrap">
        <!-- 为了让中间内容先渲染，写在上面 -->
        <div class="item center"></div>
        <div class="item left"></div>
        <div class="item right"></div>
    </div>
</body>
</html>

⭐clearfix

.clearfix::after {
	content:"";
	display:table;
	clear:both;
}

clearfix通过为父元素添加伪元素，并为其添加清除浮动效果来解决浮动元素引起的高度塌陷问题，这里设置display:table主要有两方面作用：

生成独立的BFC，从而避免浮动元素对其周围其他元素的影响
表格布局有自动调整单元格高度的特性，即表格单元格会根据内容自动撑开高度。通过将伪元素设置为 display: table，可以使其撑开父元素的高度，从而让父元素正确地包含浮动元素。