前端面试题解析：CSS篇（二）

5. CSS中有哪些方式可以隐藏页面元素？区别是什么？

在CSS中，常见的用于隐藏页面元素的方式包括：

display: none
- 脱离文档流：元素完全从文档流中移除，不占据空间。
- 无法响应事件：不可见并且无法与其交互。
- 回流重绘：元素的显示状态改变会触发回流和重绘。

.element {
    display: none;
}

visibility: hidden
- 占据文档流：元素在页面上不可见，但仍然占据相应的空间。
- 无法响应事件：被隐藏的元素无法与用户进行交互。
- 重绘：修改元素的 visibility 属性会触发重绘。

.element {
    visibility: hidden;
}

opacity: 0
- 占据文档流：元素在页面上不可见，但仍然占据相应的空间。
- 响应事件：虽然元素不可见，但仍然可以与之交互。
- 重绘或不重绘：修改元素的透明度可能会导致重绘，也可能不会，具体取决于浏览器的优化机制。

.element {
    opacity: 0;
}

position: absolute（将元素位置设置为屏幕外）
- 脱离文档流：通过将元素的位置设置为屏幕外来隐藏元素。
- 无法响应事件：隐藏的元素无法与用户进行交互，因为它不可见。
- 该方法可能会对布局产生影响，并且需要确保不会影响其他元素的排列。

.element {
    position: absolute;
    left: -9999px;
}

clip-path: circle(0%)
- 占据文档流：元素在页面上不可见，但仍然占据相应的空间。
- 无法响应事件：被裁剪的部分无法与用户进行交互。
- 重绘：可能会触发重绘操作。

.element {
    clip-path: circle(0%);
}

根据具体的需求和效果要求，选择合适的方法来隐藏页面元素是很重要的。例如：

如果需要完全移除元素并且不占据空间，可以使用 display: none；
如果需要隐藏元素但仍占据空间，可以使用 visibility: hidden 或 opacity: 0；
如果需要通过调整位置来隐藏元素，可以使用 position: absolute；
而 clip-path 则可以用来裁剪元素的可见部分。

6. 谈谈你对BFC的理解

BFC是什么？

BFC（Block Formatting Context）是CSS中用来控制和管理块级盒子布局的一种机制。 它是一个独立的渲染区域，内部的元素布局不会影响到外部元素，从而可以避免一些常见的布局问题。

渲染规则

BFC容器在计算高度时，浮动元素的高度也会计算在内

BFC是一个独立的渲染区域，可以避免外部的浮动元素对内部元素的影响。当 BFC 容器内部有浮动元素时，浮动元素的高度也会计算在该 BFC 容器的高度之内，因此可以防止父容器高度塌陷的问题。

BFC容器内的子元素的margin-top 不会和BFC这个父容器发生重叠

当BFC 容器内部的子元素使用 margin-top 时，其 margin-top 不会和该 BFC 容器的 margin-top 发生重叠。 如果与相邻的非 BFC 容器的 margin-top 发生重叠，则取两者中的较大值。

遵照从上往下、从左往右的布局排列

在网页排版中，元素的位置和排列顺序遵循从上往下、从左往右的规则。行内元素和文本按照从左往右的方向排列，块级元素则按照从上往下的方向排列。如果需要改变元素的排列顺序，可以使用 CSS 中的定位属性或 Flexbox 布局等技术来实现。

触发 BFC 的条件

overflow属性：设置为除visible以外的值（如auto, hidden, `scroll）可以触发BFC。例如：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      overflow: hidden; /* 触发BFC */
    }
    .float-box {
      float: left;
      width: 100px;
      height: 100px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="float-box"></div>
  </div>
</body>
</html>

float：浮动元素会触发BFC，使元素脱离文档流并且其他块级元素环绕在其周围。例如：

<!DOCTYPE html>
<html>
<head>
  <style>
    .float-box {
      float: left; /* 触发BFC */
      width: 100px;
      height: 100px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div class="float-box"></div>
  <p>这是浮动元素周围的文本。</p>
</body>
</html>

display: inline-block：将元素的display属性设置为inline-block也可以创建BFC。例如：

<!DOCTYPE html>
<html>
<head>
  <style>
    .inline-block-box {
      display: inline-block; /* 触发BFC */
      width: 100px;
      height: 100px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div class="inline-block-box"></div>
  <div class="inline-block-box"></div>
  <div class="inline-block-box"></div>
</body>
</html>

position: absolute：使用绝对定位或固定定位的元素同样会触发BFC。例如：

<!DOCTYPE html>
<html>
<head>
  <style>
    .absolute-box {
      position: absolute; /* 触发BFC */
      top: 20px;
      left: 20px;
      width: 100px;
      height: 100px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div class="absolute-box"></div>
  <p>绝对定位的元素</p>
</body>
</html>

position: fixed: 可以创建一个固定定位的元素,固定定位的元素也会触发BFC特性。例如：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        height: 2000px;
      }
      .fixed-box {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 200px;
        height: 200px;
        background-color: #ccc;
        overflow: hidden;
      }
      .content {
        height: 1000px;
        background-color: #f7f7f7;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="fixed-box">这是一个固定定位元素</div>
      <div class="content">这是一些内容</div>
    </div>
  </body>
</html>

在上面的示例中，.fixed-box元素被设置为固定定位，并且也设置了overflow: hidden属性，这样它就创建了一个BFC。.content元素则被放在.fixed-box元素之后，并且其高度大于.fixed-box的高度，从而形成了滚动条。

BFC的应用

清除浮动：当一个父元素包含浮动元素时，它会发生高度塌陷，无法撑开父元素，这时候可以将父元素设置为BFC来解决。例如：

.container {
  overflow: hidden; /* 触发BFC */
}

阻止外边距合并：当两个相邻元素具有垂直外边距时，它们可能会发生外边距合并的情况。将其中一个元素设置为 BFC 可以阻止外边距合并，确保它们之间的外边距不会发生重叠。
自适应两栏布局：使用BFC可以轻松实现自适应的两栏布局，例如：

<style>
  .container {
    overflow: hidden; /* 触发BFC */
  }
  .col-left {
    float: left;
    width: 200px;
  }
  .col-right {
    margin-left: 200px;
  }
</style>
<div class="container">
  <div class="col-left">左侧内容</div>
  <div class="col-right">右侧内容</div>
</div>

解决文字环绕问题：当一个元素浮动后，它周围的文字会环绕在它的四周，这时候可以让它形成一个新的BFC，使得周围的文字只能在它的上下两侧流动。
防止元素被遮挡：当一个元素使用了绝对定位或固定定位时，可能会遮挡页面上的其他元素，这时候可以将遮挡元素设置为BFC，从而避免遮挡其他元素。

7. 水平垂直居中的方式有哪些？ (重点！！！！！）

在已知宽高的情况下：

position: absolute + translate || margin负值：这种方法通常是通过将元素设置为绝对定位，然后使用translate或负边距来实现水平垂直居中，适用于已知宽高的元素。

.container {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.centered-element {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px; /* 高度的一半 */
  margin-left: -50px; /* 宽度的一半 */
  width: 100px;
  height: 50px;
  background-color: yellow;
  transform: translate(-50%, -50%);
}

flex：使用flexbox布局是实现水平垂直居中最简单的方法之一，适用于已知宽高的元素。

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

grid：使用CSS网格布局可以轻松实现水平垂直居中，适用于已知宽高的元素。

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

margin(已知宽高) ：对于已知宽高的元素，可以使用margin来实现水平垂直居中，适用于块级元素。

.centered-element {
  width: 200px; /* 已知宽度 */
  height: 100px; /* 已知高度 */
  margin: auto;
}

这些方法都可以实现已知宽高元素的水平垂直居中，具体选择哪种方法取决于具体的布局需求和浏览器兼容性要求。

ps:

（假如您也和我一样，在准备春招。
欢迎加我微信shunwuyu，
这里有几十位一心去大厂的友友可以相互鼓励，
分享信息，模拟面试，共读源码，齐刷算法，手撕面经。来吧，友友们！”）

必备了解的前端面试题—CSS技能篇（二）

前端面试题解析：CSS篇 （二）

5. CSS中有哪些方式可以隐藏页面元素？ 区别是什么？