前端面试刷题必备（CSS篇）

站长

2024年04月16日 21:23 · 阅读数 5

前端面试刷题必备（CSS篇）

1. 什么是盒子模型

盒子模型它包含了内容（content）、内边距（padding）、边框（border）、外边距（margin）

正常模式下，也就是标准盒子模型，盒子的宽度就是 width = content
怪异模式下，盒子的宽度是 width = content + padding + border

通常我们可以使用box-sizing来修改盒子模式，border-box会将 padding 和 border 都算入 width；content-box就是默认的标准模式。

2. 什么是 BFC

全称：Block Formatting Content，中文意思就是块级格式化上下文，他的作用就是将这个盒子（空间）内的子元素不会影响到外面的布局。

BFC 规则

BFC 就是一个块级元素，会在垂直方向一个接一个排列
在页面中是一个隔离的独立容器，容器内部的元素不会影响到外部标签
垂直方向的距离由 margin 决定，同一个 BFC 的 2 个相领标签外边距会发生重叠
计算 BFC 高度时，浮动元素也参与计算

怎么触发 BFC

overflow：不为 visible 和 clip
position：absolute 或 fixed
float：不为 none
display：为 inline-block、table-cell、flex、inline-flex、table-caption 等

BFC 的作用

解决子元素浮动造成父元素高度坍塌问题将父元素触发 BFC
相领子元素使用 margin 时边距重叠问题可以给 2 个子元素各套一个触发 BFC 的父元素等等

3. 实现左边宽度固定，右边宽度自适应

1. inline-block + calc

左边定宽，右边 calc(100% - 宽度)

2. float + calc

使用 float 使 2 个盒子处于同一行，左边固定宽度，右边根据计算来确定宽度实现自适应

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

.left,
.right {
  float: left;
  box-sizing: border-box;
}

.right {
  width: calc(100% - 120px);
}

3.float + BFC

使用 float 和 overflow:hidden 将元素在同一行，左边设置固定宽度，右边由于 BFC 会自适应

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

.left {
  float: left;
}

.right {
  margin-left: 0;
  overflow: auto;
}

4. flex

左边设置固定宽度，右边设置 flex: 1

.container {
  display: flex;
}

.right {
  flex: 1;
}

5. float + margin

使用 float 将 2 个元素在同一行，左边设置宽度，右边通过 margin-left 实现隔离 2 者重叠

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

.left {
  float: left;
  box-sizing: border-box;
}

.right {
  margin-left: 120px;
}

6. grid 布局

子元素不需要设置宽度，蛋蛋设置父元素属性即可。

.grid {
  display: grid;
  grid-template-columns: 200px 100%;
  height: 200px;
}

7. 双子元素 + absolute

子元素设置宽高，不然撑不起来。右元素设置 left: 宽度

.left {
  position: absolute;
  box-sizing: border-box;
}

.right {
  margin-left: 120px;
}

4. 清除浮动的方式

元素浮动会存在什么问题？

文字围绕浮动元素排版，我们可能希望文字排列在浮动元素下方
父元素高度坍塌
影响其父元素的兄弟元素排版

清除浮动的方式

1. 利用 clear 样式

在浮动元素同级的元素上增加属性clear:both，告诉游览器清除左右两边的浮动

2. 利用伪元素

给父元素添加一个伪元素，伪元素上做clear:both

.topDiv::after {
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  content: ".";
}

3. overflow 清除浮动

父标签添加overflow:hidden，实际上就是利用 BFC

元素局中的方式

1. 使用 absolute + transform

父元素使用相对定位，子元素使用绝对定位，然后利用 transform

.center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

2. absolute + margin

父元素使用相对定位，子元素使用绝对定位，然后利用 margin，但是需要知道子元素的实际宽度。

.center {
  position: absolute;
  left: 50%;
  width: 200px;
  margin-left: -100px;
}

3. 使用 margin

.center {
  margin: 0 auto;
}

4. 行内元素使用 text-align

.center {
  text-align: center;
}

5. 使用 flex

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

flex

flex 分为项目属性和容器属性，容器属性存在 2 根轴：主轴和交叉轴，默认情况下，主轴是水平方向的，交叉轴是垂直方向的。

主轴属性

1. flex-direction

决定主轴的方向，即项目的排列方向

row: 从左到右排列
row-reverse: 从右向左排列
column: 从上到下
column-reverse: 从下往上

2. flex-wrap

是否换行

nowrap：单行排列，不换行
wrap：多行排列，从上到下顺序
wrap-reverse：多行排列，从下到上顺序

3. flex-flow

上述 2 个的组合，第一个值是flex-direction的值，第二个值是flex-wrap的值

4. justify-content

定义了项目在主轴上的对齐方式及额外空间的分配方式

flex-start：从起点线开始顺序排列
flex-end：从终点开始顺序排列
center：局中排列
space-between：项目均匀分布，第一项在启点线，最后一项在终点线
space-around：项目均匀分布，每一个项目两侧有相同的留白空间，相邻项目之间的距离是两个项目之间留白的和
space-evenly：项目均匀分布，所有项目之间及项目与边框之间距离相等

5. align-items

属性定义项目在交叉轴上的对齐方式

stretch：交叉轴方向拉伸显示
flex-start：项目按交叉轴起点线对齐
flex-end：项目按交叉轴终点线对齐
center：交叉轴方向项目中间对齐
baseline：交叉轴方向按第一行文字基线对齐

6. align-content

定义了在交叉轴方向的对齐方式及额外空间分配，类似于主轴上 justify-content 的作用。

stretch：拉伸显示
flex-start：从起点线开始顺序排列
flex-end：相对终点线顺序排列
center：剧中排列
space-between：均匀分布，第一项在起点上，最后一项在终点线
space-around：项目均匀分布，每一个项两侧有相同的留白空间

项目属性

1. order

可以控制项目在容器中的先后顺序

flex-grow

定义项目的放大比例，flex-grow 值是一个单位的正整数，表示放大的比例。默认为0，即如果存在额外空间，也不放大，负值无效。

flex-shrink

定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。0 表示不缩小，负值无效。

flex-basis

定义项目在分配额外空间之前的缺省尺寸。属性值可以是长度（20%，10rem 等）或者关键字auto。它的默认值为auto，即项目的本来大小。

flex

这个其实就是flex-grow flex-shrink flex-basic的简写，默认为0 1 auto,后面 2 个是可选的。

align-self

定义项目的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

额外补充

flex:1 => flex: 1 1 0%
flex: 0 => flex: 0 1 0%
flex: auto => flex: 1 1 auto
flex: none => flex: 0 0 auto

伪元素和伪类的区别和作用

伪元素：

在内容元素的前后插入额外的元素或样式，但是这些元素实际上不在文档中生成，只是在外部显示可见，在源码中是无法找到的。

伪类：

将特殊的效果添加的特定选择器上，在已有的元素上添加类别，不会产生新的元素。

什么是重绘和重排？

重排

当文档中的元素节点尺寸或位置发生变化时，需要重新计算生成布局，则为重排

重绘

当元素节点的属性发生改变，而不影响页面布局的，则为重绘。比如：文字颜色、背景色、透明度等等

重绘不一定重排，重排一定触发重绘。

重排消耗的性能比重绘大，所以我们尽量选择代价小一点的。

大屏开发 vw rem scale3 种适配的对比

vw 相比于 rem 的优势：

不需要去计算 Html 的 font-size 大小，不需要给 Html 设置 font-size，也不需要设置 body 的 font-size，防止继承；
因为不依赖 Font-size 的尺寸，所以不用担心某些原因 html 的 font-size 尺寸被纂改，页面尺寸混乱
vw 相比于 rem 更加语义化，1vw 是 1/100 的 viewport 大小，并且具备 rem 之前所有的优点

vw 和 rem 存在问题

如果使用 rem 或 vw 单位时，在 js 中添加样式时，单位需要手动设置 rem 或 vw
第三方库的字体默认都是 px 单位，比如 element\echarts，需要层叠第三方库的样式
当大屏比例更大时，有些字体需要相应的调整字号。

scale 的优势：

相比于 vw 和 rem 使用起来更加简单，不需要对单位进行转换
因为不用转换，所以第三方库不需要考虑单位转换问题
由于游览器的字体默认最小不能小于 12px，所以在使用 rem 和 vw 时，字体大小不能小于 12px，而 scale 可以解决这个问题

说一下 png8、png16、png32 的区别，并简单讲讲 png 的压缩原理

PNG 8

指的是 8bits，相当于用 2^8 大小开存储一张图片的颜色种类，能存储 256 种颜色。

PNG 24

相当于 3 乘以 8 等于 24，就是用三个 8bits 分别去表示 R（红）、G（绿）、B（蓝）。R(0-255),G(0-255),B(0-255)，可以表达 256 乘以 256 乘以 256=16777216 种颜色的图片，这样 PNG 24 就能比 PNG 8 表示色彩更丰富的图片。但是所占用的空间相对就更大了。

PNG 32

PNG 32 中的 32，相当于 PNG 24 加上 8bits 的透明颜色通道，就相当于 R（红）、G（绿）、B（蓝）、A（透明）。R(0255),G(0255),B(0255),A(0255)。比 PNG 24 多了一个 A（透明），也就是说 PNG 32 能表示跟 PNG 24 一样多的色彩，并且还支持 256 种透明的颜色，能表示更加丰富的图片颜色类型。

压缩原理：

分为 2 个阶段：

预解析：对 png 图片进行一个预处理，处理好方便后续压缩
压缩：执行 Deflate 压缩通过一系列算法进行编码