2023面试题大全(CSS进阶篇)

1. 对 BFC 的理解

BFC(Block Formatting Context)全名块级格式化上下文,通俗来说 BFC 是一个独立的布局环境,可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。

触发 BFC 的条件有

根元素：body
元素设置浮动：float 除 none 以外的值
元素设置绝对定位：position (absolute、fixed)
display 值为：inline-block、table-cell、table-caption、flex 等
overflow 值为：hidden、auto、scroll

BFC 特点

垂直方向上，自上而下排列，和文档流的排列方式一致。
如果两个块级元素属于同一个 BFC，它们的上下 margin 会重叠（或者说折叠）,以较大的为准。但是如果两个块级元素分别在不同的 BFC 中，它们的上下边距就不会重叠了，而是两者之和需要注意的是如果两个 BFC 设置的是 overflow:hidden 的话,上下边距依然会重合。
计算 BFC 的高度时，需要计算浮动元素的高度(所以可以设置 BFC 来清除浮动)
BFC 区域不会与浮动的容器发生重叠
BFC 是独立的容器，容器内部元素不会影响外部元素
每个元素的左 margin 值和容器的左 border 相接触

2. px、em、rem 的区别及使用场景

区别

px 是固定的像素，一旦设置了就无法因为适应页面大小而改变。
em 和 rem 相对于 px 更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于响应式布局。
em 是相对于其父元素来设置字体大小，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而 rem 是相对于根元素，这样就意味着，只需要在根元素确定一个参考值(经常根据这一特点来进行 rem 布局)。

场景：

px 一般用于 PC 网页,比如宽度固定的网页或者采用媒体查询的网页。

rem 一般用于适配移动端网页,根据不同手机宽度展现出不同大小(类似等比缩放)

3. 为什么需要清除浮动？清除浮动的方式及原理

最初 float 属性的出现主要是为了实现浮动元素周围文字环绕的效果。

比如如下代码

  <style>
      .box1 {
        background: pink;
      }
      .box2 {
        float: left;
        background: red;
      }
      .box3 {
        background: orange;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="box1">box1box1box1box1box1</div>
      <div class="box2">浮动元素</div>
      <div class="box3">泰酷辣泰酷辣泰酷辣泰酷辣泰酷辣泰酷辣泰酷辣泰酷辣</div>
    </div>
     </body>

这是 float 属性最初的理应用法，常用于实现图文混排的效果

可以发现，对于浮动元素后面的第一个同级正常元素，其文本会环绕在其周围

当今流行的浮动布局已不再是最初的文字环绕了，而是通过给每个子元素添加浮动来实现元素横向排列（一行占不下就换行继续）的布局。有一种选择则是使用浮动,但是浮动元素有一个特点就是脱离文档流从而出现父元素高度塌陷问题

因此我们要清除浮动(清除浮动并不是去掉浮动，而是解决因为浮动带来的副作用的消极影响，也就是父元素高度塌陷问题),下面有几种清除浮动的方法

给父级 div 定义 height 属性

原理很简单,直接定高,但是使用的时候必须知道子元素高度(因此不推荐使用)

最后一个浮动元素之后添加一个空的 div 标签或者使用 :after 伪元素，并添加 clear:both 样式

.clear::after {
  content: "";
  display: block;
  clear: both;
}

clear 的原理是元素盒子的边不能和前面的浮动元素相邻。其本质在于让当前元素不和前面的 float 元素在一行显示。因此它会换到下一行同时撑开父元素

包含浮动元素的父级标签添加 overflow:hidden 或者 overflow:auto

此法原理在于让父元素成为一个 BFC,上面提到过 BFC 的特点(计算 BFC 的高度时，需要计算浮动元素的高度)

4. 对 sticky 定位的理解

sticky 英文字面意思是粘贴，所以可以把它称之为粘性定位。语法：position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同

5. 说一下对 Flex 布局的理解

flex 是 flexible Box 的缩写，意为 “弹性盒布局”,flex 布局则是一种新的布局方案，通过将父元素的 display 属性设置为 flex，让父元素成为一个 flex 容器，从而可以自由的操作容器中子元素(项目)的排列方式。

想了解更多Flex布局可以点击查看Flex所有用法

一篇文章带你掌握Flex布局的所有用法

6. 实现响应式布局的方式有哪些

百分比布局

当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

flex 布局

弹性布局是一种十分方便的，只需要依赖于 CSS 样式的实现响应式布局的方式，也是最多用到的一种实现响应式的方法。

在父元素上，我们经常会用到的有关弹性布局的属性主要有 flex-direction , flex-wrap , justify-content , align-items , align-content ，这几个属性分别从主轴的方向、是否换行、项目在主轴上的对齐方式、项目在交叉轴上的对齐方式、项目在多根轴线上的对齐方式来规范了项目在父元素中的弹性。

在子元素上，我们经常会用到的有关弹性布局的属性主要有 order , flex-grow , flex-shrink ,flex-basis , align-self ，这几个属性分别从项目的排序、项目放大比例、项目缩小比例、项目占据主轴空间、单个项目在交叉轴上的对齐方式来规范了项目自身的弹性。

rem 布局

rem 是相对于 html 根元素的字体大小的单位,我们可以根据不同宽度浏览器设置不同的根字体大小从而实现响应式布局

vw/vh 布局

vw 和 vh 分别相对的是视图窗口的宽度和视口窗的高度。

100vw = 视图窗宽度，100vh = 100 视图窗高度

因此可以给元素尺寸设置 vw 作为单位即可实现不同宽度浏览器视口宽度展示不同尺寸大小,从而实现等比放大或缩小。一般在现代前端开发中都会使用脚手架开发,我们可以直接安装对应插件然后配置设计图尺寸插件就会自动把 px 转换成为 vw,非常方便

媒体查询

通过@media 媒体查询，可以通过给不同屏幕的大小编写不同的样式来实现响应式的布局。

.box {
  width: 500px;
  height: 500px;
  background-color: aqua;
}
@media screen and (max-width: 1280px) {
  .box {
    width: 400px;
    height: 400px;
  }
}