恐惧就是这样，你直视它、向前一步的时候它就消失了，选择相信自己能克服一切困难，勇敢向前，直面恐惧，就会发现之前的害怕，变成了心里的能量。

大家好，我是柒八九。

今天，我们继续2023前端面试真题系列。我们来谈谈关于CSS的相关知识点。

如果，想了解该系列的文章，可以参考我们已经发布的文章。如下是往期文章。

文章list

1. 2023前端面试真题之JS篇

你能所学到的知识点

1. 盒模型 推荐阅读指数⭐️⭐️⭐️⭐️
2. CSS的display属性有哪些值 推荐阅读指数⭐️⭐️⭐️⭐️
3. position 里面的属性有哪些 推荐阅读指数⭐️⭐️⭐️⭐️
4. flex里面的属性 推荐阅读指数⭐️⭐️⭐️⭐️⭐️
5. flex布局的应用场景 推荐阅读指数⭐️⭐️⭐️⭐️
6. CSS的长度单位有哪些 推荐阅读指数⭐️⭐️⭐️⭐️
7. 水平垂直居中 推荐阅读指数⭐️⭐️⭐️⭐️⭐️
8. {块级格式化上下文|Block Formatting Context} 推荐阅读指数⭐️⭐️⭐️⭐️⭐️
9. 层叠规则 推荐阅读指数⭐️⭐️⭐️⭐️⭐️
10. 重绘和重排 推荐阅读指数⭐️⭐️⭐️⭐️⭐️
11. CSS引入方式(4种) 推荐阅读指数⭐️⭐️⭐️⭐️
12. 硬件加速 推荐阅读指数⭐️⭐️⭐️⭐️⭐️
13. 元素超出宽度...处理 推荐阅读指数⭐️⭐️⭐️⭐️⭐️
14. 元素隐藏 推荐阅读指数⭐️⭐️⭐️⭐️⭐️
15. Chrome支持小于12px 的文字 推荐阅读指数⭐️⭐️⭐️⭐️

好了，天不早了，干点正事哇。

---

盒模型

一个盒子由四个部分组成：content、padding、border、margin

1. content，即实际内容，显示文本和图像
   • content 属性大都是用在::before/::after这两个伪元素中
2. padding，即内边距，内容周围的区域
   • 内边距是透明的
   • 取值不能为负
   • 受盒子的background属性影响
   • padding 百分比值无论是水平还是垂直方向均是相对于宽度计算
3. boreder，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成
4. margin，即外边距，在元素外创建额外的空白，空白通常指不能放其他元素的区域

标准盒模型

• 盒子总宽度 = width + padding + border + margin;

• 盒子总高度 = height + padding + border + margin

也就是，width/height 只是内容宽高，不包含 padding 和 border 值

IE 怪异盒子模型

• 盒子总宽度 = width + margin;

• 盒子总高度 = height + margin;

也就是，width/height 包含了 padding 和 border 值

更改盒模型

CSS 中的 box-sizing 属性定义了渲染引擎应该如何计算一个元素的总宽度和总高度

box-sizing: content-box|border-box

1. content-box (默认值)，元素的 width/height 不包含padding，border，与标准盒子模型表现一致
2. border-box 元素的 width/height 包含 padding，border，与怪异盒子模型表现一致

---

CSS的display属性有哪些值

CSS display 属性设置元素是否被视为块或者内联元素以及用于子元素的布局，例如流式布局、网格布局或弹性布局。

形式上，display 属性设置元素的内部和外部的显示类型。

1. 外部类型设置元素参与流式布局；
2. 内部类型设置子元素的布局（子元素的格式化上下文）

常见属性值（8个）

1. inline :默认
2. block
3. inline-block
4. flex
5. grid
6. table
7. list-item
8. 双值的：只有Firefox70支持了这一语法

---

position 里面的属性有哪些

定义和用法：position 属性规定元素的定位类型。说明：这个属性定义建立元素布局所用的 定位机制 。

• 任何元素都可以定位
• 绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。
• 相对定位元素会相对于它在正常流中的默认位置偏移。

position 有以下可选值：（6个）

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

---

flex里面的属性

容器的属性 （6个）

1. flex-direction
   • 决定主轴的方向（即项目的排列方向）
   • row（默认值）：主轴为水平方向，起点在左端。
   • row-reverse：主轴为水平方向，起点在右端。
   • column：主轴为垂直方向，起点在上沿。
   • column-reverse：主轴为垂直方向，起点在下沿。
2. flex-wrap
   • flex-wrap属性定义，如果一条轴线排不下，如何换行
   • nowrap:(默认）：不换行。
   • wrap:换行，第一行在上方。
   • wrap-reverse:换行，第一行在下方
3. flex-flow
   • flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
4. justify-content
   • justify-content属性定义了项目在主轴上的对齐方式。
   • flex-start（默认值）：左对齐
   • flex-end：右对齐
   • center： 居中
   • space-between：两端对齐，项目之间的间隔都相等。
   • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
5. align-items
   • align-items属性定义项目在交叉轴上如何对齐。
   • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
   • flex-start：交叉轴的起点对齐。
   • flex-end：交叉轴的终点对齐。
   • center：交叉轴的中点对齐。
   • baseline: 项目的第一行文字的基线对齐。
6. align-content
   • align-content属性定义了多根轴线的对齐方式。
   • 如果项目只有一根轴线，该属性不起作用。

项目的属性（6个）

1. order
   • order属性定义项目的排列顺序。
   • 数值越小，排列越靠前，默认为0。
2. flex-grow
   • flex-grow属性定义项目的放大比例
   • 默认为0，即如果存在剩余空间，也不放大
   • 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）
3. flex-shrink
   • flex-shrink属性定义了项目的缩小比例，
   • 默认为1，即如果空间不足，该项目将缩小。
   • 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小
4. flex-basis
   • flex-basis属性定义了在分配多余空间之前，项目占据的{主轴空间|main size}。
   • 浏览器根据这个属性，计算主轴是否有多余空间。
   • 它的默认值为auto，即项目的本来大小。
5. flex
   • flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
   • flex: 1 = flex: 1 1 0%
   • flex: auto = flex: 1 1 auto
6. align-self

flex:1 vs flex:auto

flex:1 和 flex:auto 的区别，可以归结于flex-basis:0和flex-basis:auto的区别

当设置为0时（绝对弹性元素），此时相当于告诉flex-grow和flex-shrink在伸缩的时候不需要考虑我的尺寸

当设置为auto时（相对弹性元素），此时则需要在伸缩时将元素尺寸纳入考虑

---

flex布局的应用场景

1. 网格布局

   • Grid- display:flex
   • Grid-Cell - flex: 1; flex:1使得各个子元素可以等比伸缩,flex: 1 = flex: 1 1 0%

2. 百分比布局

   • 
   • col2 - flex: 0 0 50%;
   • col3 - flex: 0 0 33.3%;
   • 

3. 圣杯布局

   • 页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏
   • 
   • container - display: flex; - flex-direction: column;- min-height: 100vh;
   • header/footer - flex: 0 0 100px;
   • body - display: flex; - flex:1
   • content - flex: 1;
   • ads/av - flex: 0 0 100px;
   • nav - order: -1;
   • 

4. 侧边固定宽度

   • 侧边固定宽度，右边自适应
   • 
   • aside1 - flex: 0 0 20%;
   • body1 - flex:1

5. 流式布局

   • 每行的项目数固定，会自动分行
   • 
   • container2 - display: flex; - flex-flow: row wrap;
   • 

---

CSS的长度单位有哪些

1. 相对长度

   • 相对长度单位指的是这个单位没有一个固定的值，它的值受到其它元素属性（例如浏览器窗口的大小、父级元素的大小）的影响，在响应式布局方面相对长度单位非常适用
   • 

2. 绝对长度

   • 绝对长度单位表示一个真实的物理尺寸，它的大小是固定的，不会因为其它元素尺寸的变化而变化
   • 

---

水平垂直居中

1. 宽&高固定
   1. absolute + 负 margin
   2. absolute + margin auto
   3. absolute + calc
2. 宽&高不固定
   1. absolute + transform: translate(-50%, -50%);
   2. flex布局
   3. grid 布局

宽&高固定

absolute + 负 margin

.parent {
+  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -70px 0 0 -170px;
}

• 初始位置为方块1的位置
• 当设置left、top为50%的时候，内部子元素为方块2的位置
• 设置margin为负数时，使内部子元素到方块3的位置，即中间位置

absolute + margin auto

absolute + calc

---

宽&高不固定

absolute + transform: translate(-50%, -50%);

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

flex布局

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

grid布局

.parent {
  display:grid;
}
.parent .child{
  margin:auto;
}

---

{块级格式化上下文|Block Formatting Context}

{块级格式化上下文|Block Formatting Context}(BFC)，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：(6个)

1. 内部的盒子会在垂直方向一个接一个的放置
2. 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
3. 每个元素的左外边距与包含块的左边界相接触（页面布局方向从左到右），即使浮动元素也是如此
4. BFC的区域不会与float的元素区域重叠
5. 计算BFC的高度时，浮动子元素也参与计算
6. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

触发条件 （5个）RFODP

1. 根元素，即HTML元素
2. 浮动元素：float值为left、right
3. overflow值不为 visible，为 auto、scroll、hidden
4. display的值为inline-block、table、inline-table、flex、inline-flex、grid、inline-grid
5. position 的值为absolute或fixed

应用场景

1. 防止margin重叠
   • 将位于同一个BFC的元素，分割到不同的BFC中
2. 高度塌陷
   • 计算BFC的高度时，浮动子元素也参与计算
   • 子元素浮动
   • 父元素 overflow: hidden;构建BFC
3. 多栏自适应
   • BFC的区域不会与float的元素区域重叠
   • aside -float:left
   • main -margin-left:aside-width -overflow: hidden构建BFC

---

层叠规则

所谓层叠规则，指的是当网页中的元素发生层叠时的表现规则。

z-index:z-index属性只有和定位元素(position不为static的元素)在一起的时候才有作用。

CSS3中，z-index已经并非只对定位元素有效，flex盒子的子元素也可以设置z-index属性。

层叠上下文的特性

• 层叠上下文的层叠水平要比普通元素高
• 层叠上下文可以阻断元素的混合模式
• 层叠上下文可以嵌套，内部层叠上下文及其所有元素均受制于外部的层叠上下文
• 每个层叠上下文和兄弟元素独立
  • 当进行层叠变化或渲染的时候，只需要考虑后代元素
• 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中

层叠上下文的创建（3类）

由一些CSS属性创建

1. 天生派
   • 页面根元素天生具有层叠上下文
   • 根层叠上下文
2. 正统派
   • z-index值为数值的定位元素的传统层叠上下文
3. 扩招派
   • 其他CSS3属性

根层叠上下文

指的是页面根元素,页面中所有的元素一定处于至少一个层叠结界中

定位元素与传统层叠上下文

对于position值为relative/absolute的定位元素,当z-index值不是auto的时候，会创建层叠上下文。

CSS3属性（8个）FOTMFIWS

1. 元素为flex布局元素(父元素display:flex|inline-flex),同时z-index值不是auto - flex布局
2. 元素的opactity值不是1 - {透明度|opactity}
3. 元素的transform值不是none - {转换|transform}
4. 元素mix-blend-mode值不是normal - {混合模式|mix-blend-mode}
5. 元素的filter值不是none - {滤镜|filter}
6. 元素的isolation值是isolate - {隔离|isolation}
7. 元素的will-change属性值为上面②~⑥的任意一个（如will-change:opacity）
8. 元素的-webkit-overflow-scrolling设为touch

---

重绘和重排

页面渲染的流程， 简单来说，初次渲染时会经过以下6步：

1. 构建DOM树；
2. 样式计算；
3. 布局定位；
4. 图层分层；
5. 图层绘制；
6. 合成显示；

在CSS属性改变时，重渲染会分为回流、重绘和直接合成三种情况，分别对应从布局定位/图层绘制/合成显示开始，再走一遍上面的流程。

元素的CSS具体发生什么改变，则决定属于上面哪种情况：

• 回流（又叫重排）：元素位置、大小发生变化导致其他节点联动，需要重新计算布局；
• 重绘：修改了一些不影响布局的属性，比如颜色；
• 直接合成：合成层的transform、opacity修改，只需要将多个图层再次合并，而后生成位图，最终展示到屏幕上；

触发时机

回流触发时机

回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流。

• 添加或删除可见的DOM元素
• 元素的位置发生变化
• 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
• 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
• 页面一开始渲染的时候（这避免不了）
• 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
• 获取一些特定属性的值
  • offsetTop、offsetLeft、 offsetWidth、offsetHeight
  • scrollTop、scrollLeft、scrollWidth、scrollHeight
  • clientTop、clientLeft、clientWidth、clientHeight
  • 这些属性有一个共性，就是需要通过即时计算得到。因此浏览器为了获取这些值，也会进行回流。

重绘触发时机

触发回流一定会触发重绘

除此之外还有一些其他引起重绘行为：

• 颜色的修改
• 文本方向的修改
• 阴影的修改

浏览器优化机制

由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列存储重排操作并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。

当你获取布局信息的操作的时候，会强制队列刷新，例如offsetTop等方法都会返回最新的数据。

因此浏览器不得不清空队列，触发回流重绘来返回正确的值

减少回流

1. 对于那些复杂的动画，对其设置 position: fixed/absolute，尽可能地使元素脱离文档流，从而减少对其他元素的影响
2. 使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘
3. 在使用 JavaScript 动态插入多个节点时, 可以使用DocumentFragment.创建后一次插入.
4. 通过设置元素属性display: none，将其从页面上去掉，然后再进行后续操作，这些后续操作也不会触发回流与重绘，这个过程称为离线操作

---

CSS引入方式(4种)

1. 内联方式

   • <div style="background: red"></div>

2. 嵌入方式

   • 在 HTML 头部中的 <style> 标签下书写 CSS 代码

3. 链接方式

   • 使用 HTML 头部的 <head> 标签引入外部的 CSS 文件。
   • <link rel="stylesheet" type="text/css" href="style.css">

4. 导入方式

   • 使用 CSS 规则引入外部 CSS 文件

比较链接方式和导入方式

链接方式（用 link ）和导入方式（用 @import）都是引入外部的 CSS 文件的方式

• link 属于 HTML，通过 <link> 标签中的 href 属性来引入外部文件，而 @import 属于 CSS，所以导入语句应写在 CSS 中，要注意的是导入语句应写在样式表的开头，否则无法正确导入外部文件；

• @import 是 CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入外部样式文件；

当 HTML 文件被加载时，link 引用的文件会同时被加载，而 @import 引用的文件则会等页面全部下载完毕再被加载；

---

硬件加速

浏览器中的层分为两种：渲染层和合成层。

渲染层

渲染层的概念跟层叠上下文密切相关。简单来说，拥有z-index属性的定位元素会生成一个层叠上下文，一个生成层叠上下文的元素就生成了一个渲染层。

层叠上下文的创建（3类）

由一些CSS属性创建

1. 天生派
   • 页面根元素天生具有层叠上下文
   • 根层叠上下文
2. 正统派
   • z-index值为数值的定位元素的传统层叠上下文
3. 扩招派 (CSS3属性)
   1. 元素为flex布局元素(父元素display:flex|inline-flex),同时z-index值不是auto - flex布局
   2. 元素的opactity值不是1 - {透明度|opactity}
   3. 元素的transform值不是none - {转换|transform}
   4. 元素mix-blend-mode值不是normal - {混合模式|mix-blend-mode}
   5. 元素的filter值不是none - {滤镜|filter}
   6. 元素的isolation值是isolate - {隔离|isolation}
   7. 元素的will-change属性值为上面②~⑥的任意一个（如will-change:opacity）
   8. 元素的-webkit-overflow-scrolling设为touch

合成层

只有一些特殊的渲染层才会被提升为合成层，通常来说有这些情况：

1. transform:3D变换：translate3d，translateZ；
2. will-change:opacity | transform | filter
3. 对 opacity | transform | fliter 应用了过渡和动画（transition/animation）
4. video、canvas、iframe

硬件加速

浏览器为什么要分层呢？答案是硬件加速。就是给HTML元素加上某些CSS属性，比如3D变换，将其提升成一个合成层，独立渲染。

之所以叫硬件加速，就是因为合成层会交给GPU（显卡）去处理，在硬件层面上开外挂，比在主线程（CPU）上效率更高。

利用硬件加速，可以把需要重排/重绘的元素单独拎出来，减少绘制的面积。

避免重排/重绘，直接进行合成，合成层的transform 和 opacity的修改都是直接进入合成阶段的；

• 可以使用transform:translate代替left/top修改元素的位置；
• 使用transform:scale代替宽度、高度的修改；

---

元素超出宽度...处理

单行 (AKA: TWO)

1. text-overflow:ellipsis：当文本溢出时，显示省略符号来代表被修剪的文本
2. white-space:nowrap:设置文本不换行
3. overflow:hidden：当子元素内容超过容器宽度高度限制的时候，裁剪的边界是border box的内边缘

p{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width:400px;
  }

多行

1. 基于高度截断（伪元素 + 定位）
2. 基于行数截断（）

基于高度截断

关键点 height + line-height + ::after + 子绝父相

核心的css代码结构如下：

.text {
    position: relative;
    line-height: 20px;
    height: 40px;
    overflow: hidden;
  }
.text::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 20px 0 10px;
}

基于行数截断

关键点：box + line-clamp + box-orient + overflow

1. display: -webkit-box：将对象作为弹性伸缩盒子模型显示
2. -webkit-line-clamp: n：和①结合使用，用来限制在一个块元素显示的文本的行数(n)
3. -webkit-box-orient: vertical：和①结合使用 ，设置或检索伸缩盒对象的子元素的排列方式
4. overflow: hidden

p {
  width: 300px;
  display: -webkit-box;
   -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

---

元素隐藏

可按照隐藏元素是否占据空间分为两大类(6 + 3)

1. 元素不可见，不占空间(3absolute+1relative+1script+1display)
   1. <script>
   2. display:none
   3. absolute + visibility:hidden
   4. absolute + clip:rect(0,0,0,0)
   5. absolute + opacity:0
   6. relative+left负值
2. 元素不可见，占据空间(3个)
   1. visibility:hidden
   2. relative + z-index负值
   3. opacity:0

元素不可见，不占空间

<script>

<script type="text/html">
  <img src="1.jpg">
</script>

display:none

其他特点：辅助设备无法访问，资源加载，DOM可访问

对一个元素而言，如果display计算值是none，则该元素以及所有后代元素都隐藏

.hidden {
   display:none;
}

absolute + visibility

.hidden{
  position:absolute;
  visibility:hidden;
}

absolute + clip

.hidden{
 position:absolute;
 clip:rect(0,0,0,0);
}

absolute + opacity

.hidden{
 position:absolute;
 opacity:0;
}

relative+负值

.hidden{
 position:relative;
 left:-999em;
}

元素不可见，占据空间

visibility:hidden

visibility 的继承性

• 父元素设置visibility:hidden，子元素也看不见
• 但是，如果子元素设置了visibility:visible，则子元素又会显示出来

.hidden{
 visibility:hidden;
}

relative + z-index

.hidden{
 position:relative;
 z-index:-1;
}

opacity:0

.hidden{
 opacity:0;
 filter:Alpha(opacity=0)
}

总结

最常用的还是display:none和visibility:hidden，其他的方式只能认为是奇招，它们的真正用途并不是用于隐藏元素，所以并不推荐使用它们。

关于display: none、visibility: hidden、opacity: 0的区别，如下表所示：

---

Chrome支持小于12px 的文字

Chrome 中文版浏览器会默认设定页面的最小字号是12px，英文版没有限制

原由 Chrome 团队认为汉字小于12px就会增加识别难度

• 中文版浏览器 与网页语言无关，取决于用户在Chrome的设置里（chrome://settings/languages）把哪种语言设置为默认显示语言

• 系统级最小字号 浏览器默认设定页面的最小字号，用户可以前往 chrome://settings/fonts 根据需求更改

解决方案（3种）

1. zoom
2. transform:scale()
3. -webkit-text-size-adjust:none

zoom

zoom 可以改变页面上元素的尺寸，属于真实尺寸。

其支持的值类型有：

• zoom:50%，表示缩小到原来的一半
• zoom:0.5，表示缩小到原来的一半

.span10{
        font-size: 12px;
        display: inline-block;
        zoom: 0.8;
    }

transform:scale()

用transform:scale()这个属性进行放缩

使用scale属性只对可以定义宽高的元素生效，所以，需要将指定元素转为行内块元素

.span10{
        font-size: 12px;
        display: inline-block;
        transform:scale(0.8);
    }

text-size-adjust

该属性用来设定文字大小是否根据设备(浏览器)来自动调整显示大小

属性值：

• auto：默认，字体大小会根据设备/浏览器来自动调整；
• percentage：字体显示的大小
• none:字体大小不会自动调整

存在兼容性问题，chrome受版本限制，safari可以。

---

后记

分享是一种态度。

全文完，既然看到这里了，如果觉得不错，随手点个赞和“在看”吧。