CSS考察的内容不多，这些是自己整理出来的内容，为了方便自己刷题，顺便分享出来，参考了很多文章和博客，希望能给大家一些帮助。

1 盒模型

CSS3 中的盒模型有以下两种：标准盒模型、IE（替代）盒模型。

在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。 padding 和 border 再加上设置的宽⾼⼀起决定整个盒⼦的⼤⼩。

注: margin 不计⼊实际⼤⼩ —— 当然，它会影响盒⼦在⻚⾯所占空间，但是影响的是盒⼦外部空间。盒⼦的范围到边框为⽌ —— 不会延伸到margin。(盒⼦⼤⼩=width+padding+border)

• 标准盒模型：width只包含 content
• IE（替代）盒模型：content + padding + border

可以通过 box-sizing 来改变元素的盒模型：

• box-sizing: content-box ：标准盒模型（默认值）
• box-sizing: border-box ：IE（替代）盒模型
• padding-box (FireFox 曾经⽀持)
• margin-box (浏览器未实现

2 BFC

BFC （Block Formatting Contexts）即块级格式上下⽂，根据盒模型可知，每个元素都被定义为⼀个矩形盒⼦，然⽽盒⼦的布局会受到尺⼨，定位，盒⼦的⼦元素或兄弟元素，视⼝的尺⼨等因素决定，所以这⾥有⼀个浏览器计算的过程，计算的规则就是由⼀个叫做视觉格式化模型的东⻄所定义的，它是 CSS 视觉渲染的⼀部分⽤于决定块级盒的布局及浮动相互影响范围的⼀个区域。

CSS 标准盒证盒 IE下为 Layout，可通过 zoom:1 触发

触发条件:

根元素（）
浮动元素（float 不为 none）
绝对定位元素（position 为 absolute 或 fixed）
表格的标题和单元格（display 为 table-caption，table-cell）
匿名表格单元格元素（display 为 table 或 inline-table）
⾏内块元素（display 为 inline-block）
overflow 的值不为 visible 的元素
弹性元素（display 为 flex 或 inline-flex 的元素的直接⼦元素）
⽹格元素（display 为 grid 或 inline-grid 的元素的直接⼦元素）

规则:

BFC 内部的块级盒会在垂直⽅向上⼀个接⼀个排列

同⼀个 BFC 下的相邻块级元素可能发⽣margin折叠，创建新的 BFC 可以避免的外边距折叠
每个元素的左 margin 值和容器的左 border 相接触。
浮动盒的区域不会和 BFC 重叠
计算 BFC 的⾼度时，浮动元素也会参与计算
应⽤: ⾃适应多栏布局利⽤特性③ 和特性④，中间栏创建 BFC，左右栏宽度固定后浮动。

由于盒⼦的 margin box 的左边和包含块 border box 的左边相接触，同时浮动盒的区域不会和 BFC 重叠，所以中间栏的宽度会⾃适应，示例。防⽌外边距折叠利⽤特性②，创建新的 BFC ，让相邻的块级盒位于不同 BFC 下可以防⽌外边距折叠，示例。清除浮动利⽤特性⑤，BFC 内部的浮动元素也会参与⾼度计算，可以清除 BFC 内部的浮动

3 css 选择器和优先级

!important > ⾏内样式 > #id > .class > tag > * > 继承 > 默认

优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

如果存在内联样式，那么 A = 1, 否则 A = 0;
B 的值等于 ID选择器出现的次数;
C 的值等于类选择器和属性选择器和伪类出现的总次数;
D 的值等于标签选择器和伪元素出现的总次数

4 重排（reflow）和重绘（repaint）

重排：

⽆论通过什么⽅式影响了元素的⼏何信息(元素在视⼝内的位置和尺⼨⼤⼩)，浏览器需要重新计算元素在视⼝内的⼏何属性，这个过程叫做重排。

重绘：

通过构造渲染树和重排（回流）阶段，我们知道了哪些节点是可⻅的，以及可⻅节点的样式和具体的⼏何信息(元素在视⼝内的位置和尺⼨⼤⼩)，接下来就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘。

浏览器渲染过程如下：

解析HTML，⽣成DOM树，解析CSS，⽣成CSSOM树
遍历可⻅节点，将DOM树和CSSOM树结合，⽣成渲染树(Render Tree)
Layout(回流):根据⽣成的渲染树，进⾏回流(Layout)，得到节点的⼏何信息（位置，⼤⼩）
Painting(重绘):根据渲染树以及回流得到的⼏何信息，得到节点的绝对像素
Display:将像素发送给GPU，展示在⻚⾯上。

如何减少重排和重绘？

最⼩化重绘和重排，⽐如样式集中改变，使⽤添加新样式类名 .class 或 cssText 。
批量操作 DOM，⽐如读取某元素 offsetWidth 属性存到⼀个临时变量，再去使⽤，⽽不是频繁使⽤这个计算属性；⼜⽐如利⽤ document.createDocumentFragment() 来添加要被添加的节点，处理完之后再插⼊到实际 DOM 中。
使⽤ absolute 或 fixed 使元素脱离⽂档流，这在制作复杂的动画时对性能的影响⽐较明显。
开启 GPU 加速，利⽤ css 属性 transform 、will-change 等，⽐如改变元素位置，我们使⽤ translate 会⽐使⽤绝对定位改变其 left 、top 等来的⾼效，因为它不会触发重排或重绘，transform 使浏览器为元素创建⼀个 GPU 图层，这使得动画元素在⼀个独⽴的层中进⾏渲染。当元素的内容没有发⽣改变，就没有必要进⾏重绘.

5 ⽔平垂直居中多种实现⽅式

利⽤绝对定位，设置 left: 50% 和 top: 50% 现将⼦元素左上⻆移到⽗元素中⼼位置，然后再通过 translate 来调整⼦元素的中⼼点到⽗元素的中⼼。该⽅法可以不定宽⾼。
```
.father { position: relative; }
.son {
    position: absolute; 
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}
```

利⽤绝对定位，⼦元素所有⽅向都为 0 ，将 margin 设置为 auto ，由于宽⾼固定，对应⽅向实现平分，该⽅法必须盒⼦有宽⾼。

.father { position: relative; } 
.son { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0px; 
    margin: auto; 
    height: 100px; 
    width: 100px; 
 }

利⽤绝对定位，设置 left: 50% 和 top: 50% 现将⼦元素左上⻆移到⽗元素中⼼位置，然后再通过 margin-left 和 margin-top 以⼦元素⾃⼰的⼀半宽⾼进⾏负值赋值。该⽅法必须定宽⾼。

 .father { position: relative; }
 .son { 
     position: absolute; 
     left: 50%; 
     top: 50%; 
     width: 200px; 
     height: 200px; 
     margin-left: -100px; 
     margin-top: -100px; 
 }

利⽤ flex ，最经典最⽅便的⼀种了，不⽤解释，定不定宽⾼⽆所谓的。

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

6 line-height 如何继承？

⽗元素的 line-height 写了具体数值，⽐如 30px，则⼦元素 line-height 继承该值。
⽗元素的 line-height 写了⽐例，⽐如 1.5 或 2，则⼦元素 line-height 也是继承该⽐例。
⽗元素的 line-height 写了百分⽐，⽐如 200%，则⼦元素 line-height 继承的是⽗元素 font-size * 200% 计算出来的值。

7 flex 布局

www.ruanyifeng.com/blog/2015/0… 参考阮一峰讲的flex布局

flex: 1 ，它具体包含了以下的意思：

flex-grow: 1 ：该属性默认为 0 ，如果存在剩余空间，元素也不放⼤。设置为 1 代表会放⼤。
flex-shrink: 1 ：该属性默认为 1 ，如果空间不⾜，元素缩⼩。
flex-basis: 0% ：该属性定义在分配多余空间之前，元素占据的主轴空间。浏览器就是根据这个属性来计算是否有多余空间的。默认值为 auto ，即项⽬本身⼤⼩。设置为 0% 之后，因为有 flex-grow 和 flex-shrink 的设置会⾃动放⼤或缩⼩。在做两栏布局时，如果右边的⾃适应元素 flex-basis 设为 auto 的话，其本身⼤⼩将会是 0 。

8 link与 @import 的区别

link功能较多，可以定义 RSS，定义 Rel 等作⽤，⽽@import只能⽤于加载 css
当解析到link时，⻚⾯会同步加载所引的 css，⽽@import所引⽤的 css 会等到⻚⾯加载完才被加载
@import需要 IE5 以上才能使⽤ • link可以使⽤ js 动态引⼊，@import不⾏

9 CSS动画

transition: 过渡动画

transition-property: 属性
transition-duration: 间隔
transition-timing-function: 曲线
transition-delay: 延迟
常⽤钩⼦: transitionend

animation / keyframes

animation-name: 动画名称，对应@keyframes ◦ animation-duration: 间隔
animation-timing-function: 曲线
animation-delay: 延迟
animation-iteration-count: 次数

infinite: 循环动画

animation-direction: ⽅向

alternate: 反向播放

animation-fill-mode: 静⽌模式
- forwards: 停⽌时，保留最后⼀帧
- backwards: 停⽌时，回到第⼀帧
- both: 同时运⽤ forwards / backwards

常⽤钩⼦: animationend

动画属性: 尽量使⽤动画属性进⾏动画，能拥有较好的性能表现 ◦

translate

scale
rotate
skew
opacity
colo

10.Grid布局

CSS Grid 网格布局教程 - 阮一峰的网络日志 (ruanyifeng.com)

11.1 Grid如何实现类似 flex：row-reverse

通过grid-auto-flow和direction

grid-auto-flow：row|column|dense 该属性指定采用 grid 布局的容器内部的元素如何排序

direction：rt|Irt 指定文本表列的水平方向

11.三等分

1.Grid

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr（fraction）;
  gap: 1rem;
}

2.flex

.flex-container {
  display: flex;
  flex-wrap: wrap;
  // gap: 1rem;

  .item {
    flex: 0 0 calc(100% / 3);
  }
}

12.Grid的优势

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。 Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。 Grid 布局远比 Flex 布局强大

13.css variable 变量

:root{
  --bgcolor: blue;
  --color: red;
}
p {
  color: var(--color);
}
div {
  backgroung-color: var(--bgcolor);
  color: var(--color)
}

在js中使用

// 设置变量
document.getElementById("box").style.setPropertyValue('--color', 'pink')
// 读取变量
doucment.getElementById('box').style.getPropertyValue('--color').trim()    //pink
// 删除变量
document.getElementById('box').style.removeProperty('--color')

参考文章

这些文章都写的很好，很详细

做了一份前端面试复习计划，保熟～ - 掘金 (juejin.cn)

从URL输入到页面展现到底发生什么？ - 掘金 (juejin.cn)

中高级前端大厂面试秘籍，为你保驾护航金三银四，直通大厂(上) - 掘金 (juejin.cn)

面试题博客推荐

这两个网址是我常用的刷题的网站，都是些大佬做的

前端常见面试题总结 | 大厂面试题每日一题 (shanyue.tech)

web前端面试 - 面试官系列 (vue3js.cn)

资源

因为我习惯用ipad反复背题，所以整理了pdf版本和goodnotes版本（会不定时更新）需要的小伙伴可以评论区或者私信踢我（无偿），直接放这儿不知道会不会不妥。

CSS/CSS3常考面试题总结（长更）