面试中可能会遇到的css的问题（3）css面试题：谈谈你对BFC的理解。水平垂直居中的方式有哪些？ !!!!! 三栏布局

6. 谈谈你对BFC的理解

还是一样，我们要先说BFC是什么，BFC（Block Formatting Context）是页面中的一个渲染区域，具有一套自己的渲染规则。在BFC中，浮动元素的高度会被计算在内，BFC容器内的子元素的margin-top不会与BFC容器的margin发生重叠，并且元素会按照从上往下、从左往右的布局排列。

触发BFC的条件包括设置overflow属性为非visible值、使用float、将元素的display属性设置为inline-block、inline-xxx、flex、table-xxx或grid，以及使用position: absolute或position: fixed。

在应用方面，BFC常被用于清除浮动。清除浮动是指解决由浮动元素造成的父容器高度塌陷的问题。通过触发父容器的BFC，可以使其包含浮动元素，从而避免父容器高度塌陷的情况发生。

当子元素浮动时，父元素没有设置高度时，父元素的高度将会塌陷。这时可以通过创建一个BFC来清除浮动。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clear Float using BFC</title>
<style>
    .parent {
        border: 1px solid black;
        /* 触发BFC */
        overflow: hidden;
    }
    .child {
        width: 100px;
        height: 100px;
        background-color: lightblue;
        float: left;
    }
</style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>
</body>
</html>

在这个示例中，.parent元素设置了overflow: hidden;来触发BFC，这样它就能够包含浮动的.child元素，避免父元素高度塌陷的情况发生。

7. 水平垂直居中的方式有哪些？ !!!!!

这个问题被问的概率很大，所以我们要多注意这个问题，我们直接来问这个问题，常见的有以下五点：

position: absolute + translate || margin负值(已知宽高)
flex
grid
table: text-align + vertical-align (子容器不能是块级)
margin(已知宽高)

接下来我们用代码展示一下：

使用position: absolute结合transform: translate(-50%, -50%)实现水平垂直居中：

<!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>
    .box{
        width: 500px;
        height: 500px;
        background-color: antiquewhite;
        position: relative;
    }
    .wrap{
        width: 200px;
        height: 200px;
        background-color: #5cd552;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>
</head>
<body>
<div class="box">
    <div class="wrap">hello world</div>
</div>
</body>
</html>

使用flexbox实现水平垂直居中：

<!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>
    .box{
        width: 500px;
        height: 500px;
        background-color: antiquewhite;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .wrap{
        width: 200px;
        height: 200px;
        background-color: #5cd552;
    }
</style>
</head>
<body>
<div class="box">
    <div class="wrap">hello world</div>
</div>
</body>
</html>

使用grid实现水平垂直居中：

<!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>
    .box{
        width: 500px;
        height: 500px;
        background-color: antiquewhite;
        display: grid;
        place-items: center;
    }
    .wrap{
        width: 200px;
        height: 200px;
        background-color: #5cd552;
    }
</style>
</head>
<body>
<div class="box">
    <div class="wrap">hello world</div>
</div>
</body>
</html>

使用table布局的text-align和vertical-align属性实现水平垂直居中：

<!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>
    .box{
        width: 500px;
        height: 500px;
        background-color: antiquewhite;
        display: table;
        text-align: center;
        vertical-align: middle;
    }
    .wrap{
        display: table-cell;
        width: 200px;
        height: 200px;
        background-color: #5cd552;
    }
</style>
</head>
<body>
<div class="box">
    <div class="wrap">hello world</div>
</div>
</body>
</html>

使用margin结合已知宽高实现水平垂直居中：

<!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>
    .box{
        width: 500px;
        height: 500px;
        background-color: antiquewhite;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .wrap{
        width: 200px;
        height: 200px;
        background-color: #5cd552;
        margin: auto;
    }
</style>
</head>
<body>
<div class="box">
    <div class="wrap">hello world</div>
</div>
</body>
</html>

8. 三栏布局怎么实现？

在讲如何实现三栏布局我们先讲讲如何实现两栏布局：

flex
grid
float + margin-left

这三种方法都可以实现简单的两栏布局，具体选择哪种取决于布局需求和个人偏好。Flexbox和Grid布局更加现代和灵活，而Float和Margin布局在一些旧的项目中仍然有一定的应用。下面是代码实例：

1. 使用Flexbox实现两栏布局：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox布局</title>
<style>
    .container {
        display: flex;
    }
    .left {
        flex: 0 0 200px;
        background-color: #f1f1f1;
    }
    .right {
        flex: 1;
        background-color: #ccc;
    }
</style>
</head>
<body>
<div class="container">
    <div class="left">左侧栏目</div>
    <div class="right">右侧内容</div>
</div>
</body>
</html>

2. 使用Grid布局实现两栏布局：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid布局</title>
<style>
    .container {
        display: grid;
        grid-template-columns: 200px 1fr;
    }
    .left {
        background-color: #f1f1f1;
    }
    .right {
        background-color: #ccc;
    }
</style>
</head>
<body>
<div class="container">
    <div class="left">左侧栏目</div>
    <div class="right">右侧内容</div>
</div>
</body>
</html>

3. 使用Float和Margin实现两栏布局：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Float和Margin布局</title>
<style>
    .left {
        float: left;
        width: 200px;
        background-color: #f1f1f1;
    }
    .right {
        margin-left: 200px;
        background-color: #ccc;
    }
</style>
</head>
<body>
<div class="left">左侧栏目</div>
<div class="right">右侧内容</div>
</body>
</html>

接下来我们讲讲如何实现三栏布局，我们先知道什么是三栏布局，三栏布局是一种网页布局方式，将页面内容分为左侧栏、右侧栏和中间主要内容区域三个部分。通常情况下，左侧栏和右侧栏是固定宽度的侧边栏，而中间主要内容区域则是自适应宽度的区域。下面是实现三栏布局的方法：

flex
grid
左右先加载内容后加载：float + margin
圣杯布局：float + margin负值 + position:relative
双飞翼布局：float + margin负值

前面两种我就不再赘述了，我们直接讲讲剩下三种：

3.左右先加载内容后加载：float + margin 实现三栏布局：

这种方法利用浮动和外边距来实现三栏布局，其中左右两栏优先加载内容，中间主要内容栏后加载内容。具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>左右先加载内容后加载三栏布局</title>
<style>
    .left {
        float: left;
        width: 200px;
        background-color: #f1f1f1;
    }
    .right {
        float: right;
        width: 200px;
        background-color: #f1f1f1;
    }
    .main {
        margin: 0 220px;
        background-color: #ccc;
    }
</style>
</head>
<body>
<div class="left">左侧栏</div>
<div class="right">右侧栏</div>
<div class="main">主要内容</div>
</body>
</html>

4. 圣杯布局：float + margin负值 + position:relative 实现三栏布局：

圣杯布局是一种常见的三栏布局方式，通过结合浮动、负外边距和相对定位来实现。左右两栏固定宽度，中间主要内容栏自适应宽度。具体代码如下：

<!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>
    .wrap{
      height: 200px;
      padding: 0 200px 0 200px;
    }
    .left{
      width: 200px;
      height: 100%;
      background-color: aqua;
      float: left;
      position: relative;
      right: 200px;
      margin-left: -100%;
    }
    .content{
      width: 100%;
      height: 100%;
      background-color: cadetblue;
      float: left;
    }
    .right{
      width: 200px;
      height: 100%;
      background-color: bisque;
      float: left;
      margin-left: -200px;
      position: relative;
      right: -200px;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="content">content</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>
</html>

5. 双飞翼布局：float + margin负值实现三栏布局：

双飞翼布局是在圣杯布局基础上进一步优化，通过使用额外的内层容器来解决圣杯布局中的一些问题。具体代码如下：

<!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>
    .wrap{
      height: 200px;
    }
    .conatiner{
      height: 100%;
      background-color: cadetblue;
      padding: 0 200px 0 200px;
      float: left;
      width: 100%;
      box-sizing: border-box;
    }
    .left{
      width: 200px;
      height: 100%;
      background-color: aqua;
      float: left;
      margin-left: -100%;
    }
    .right{
      width: 200px;
      height: 100%;
      background-color: bisque;
      float: left;
      margin-left: -200px;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="conatiner">
      <div class="content">content</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>
</html>

这就是本文的全部内容了，还有的css问题会在后续文章继续解答。

面试中可能会遇到的css的问题（3）