CSS模块

1.水平垂直居中的实现方式

1) 知道宽高

绝对定位和负margin

 .box {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      position: relative;
    }
 .children-box {
      position: absolute;
      width: 100px;
      height: 100px;
      background: yellow;
      left: 50%;
      top: 50%;
      margin-left: -50px;
      margin-top: -50px;
    }

绝对定位和transform

.box {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      position: relative;
    }
.children-box {
      position: absolute;
      width: 100px;
      height: 100px;
      background: yellow;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

绝对定位和margin

.box {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      position: relative;
    }
 .children-box {
      position: absolute;
      width: 100px;
      height: 100px;
      background: yellow;
      margin: auto;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

flex布局

2）不知道宽高

使用上述的flex布局与绝对定位和transform即可

2.外边距塌陷

外边距塌陷就是两个块级元素一个设置margin-top，一个设置margin-bottom，取值只为两者的绝对值最高的一个，而不是取两者之和，这就是发生了外边距塌陷

满足以下两个条件：

垂直方向上
块级元素，不能是行内和行内块级元素

解决方法：使用BFC

3.BFC

BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。

怎样触发BFC

这里简单列举几个触发BFC使用的CSS属性

overflow: hidden
display: inline-block
position: absolute
position: fixed
display: table-cell
display: flex

BFC的规则

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

4. 盒子模型

标准盒模型 width = content

怪异盒（IE)模型 width = content + padding + border

5. CSS样式优先级

！important的优先级是最高的
1.内联样式，权值为 1000
2.ID 类选择器，比如#demo，权值为 0100
3.类、伪类、属性选择器，如.foo, :first-child, div[class="bar"]，权值为 0010
4.标签、伪元素选择器，如 div::first-line，权值为 0001
5.通配符、子类选择器、兄弟选择器，如*, >, +，权值为 0000
6.继承的样式没有权值

6. 浏览器的重排与重绘 (Reflow & Repaint)

浏览器渲染页面过程

HTML解析文件，生成DOM Tree，解析CSS文件生成CSSOM Tree
将Dom Tree和CSSOM Tree结合，生成Render Tree(渲染树)
根据Render Tree渲染绘制，将像素渲染到屏幕上。

由于浏览器使用流式布局，对Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一。

重排与重绘重排：当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为重排。

重绘：当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

如何避免大量的重排和重绘

CSS

避免使用table布局。
尽可能在DOM树的最末端改变class。
避免设置多层内联样式。
将动画效果应用到position属性为absolute或fixed的元素上。
避免使用CSS表达式（例如：calc()）。

JavaScript

避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。
避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。

7. CSS加载会造成阻塞么

css加载不会阻塞DOM树的解析
css加载会阻塞DOM树的渲染
css加载会阻塞后面js语句的执行

如何避免长时间的白屏，可以加快css加载速度

使用CDN(因为CDN会根据你的网络状况，替你挑选最近的一个具有缓存内容的节点为你提供资源，因此可以减少加载时间)
对css进行压缩(可以用很多打包工具，比如webpack,gulp等，也可以通过开启gzip压缩)
合理的使用缓存(设置cache-control,expires,以及E-tag都是不错的，不过要注意一个问题，就是文件更新后，你要避免缓存而带来的影响。其中一个解决防范是在文件名字后面加一个版本号)
减少http请求数，将多个css文件合并，或者是干脆直接写成内联样式(内联样式的一个缺点就是不能缓存)

参考文章 juejin.cn/post/684490…

前端必备知识点 css总结