CSS知识点汇总(六)--垂直居中&动画实现方式

1. CSS 垂直居中有哪些实现方式？

在布局一个页面时，通常都会用到水平居中和垂直居中，处理水平居中很好处理，就是设定margin:0 auto;或是text-align:center,就可以轻松解决掉水平居中的问题，最麻烦对齐问题就是「垂直居中」，以下将介绍几种单纯利用CSS垂直居中的方式

<div class="box">
    <div class="small">small</div>
</div>
.box {
    width: 200px;
    height: 200px;
    background: #fff;
}
.small {
    background: blue;
}

1.absolute + margin实现

.box {
    position: relative;
}
.small {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
    width: 100px;
    height: 100px;
}

2. absolute + calc 实现

.box {
    position: relative;
}
.small {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
}

3. absolute + transform 实现

.box {
    position: relative;
}
.small {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    width: 100px;
    height: 100px;
}

4. table-cell

.box {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.small {
    padding: 6px 10px;
    display: inline-block;
}

5. flex

第一种
.box {
    display: flex;
    justify-content: center;
    align-items: center;
}
第二种
.box {
    display: flex;
    justify-content: center;
}
.small {
    align-self: center;
}

6. grid

网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器已经内置。

第一种
.box {
    display: grid;
    justify-items: center;
    align-items: center;
}
第二种
.box {
    display: grid;
}
.small {
    justify-self: center;
    align-self: center;
}
第三种
.box {
    display: grid;
    justify-items: center;
}
.small {
    align-self: center;
}

2.css加载会造成阻塞吗？

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

浏览器渲染的流程如下：

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

由此我们可以看出：

• DOM解析和CSS解析是两个并行的进程，所以这也解释了为什么CSS加载不会阻塞DOM的解析。
• 由于Render Tree是依赖于DOM Tree和CSSOM Tree的，所以他必须等待到CSSOM Tree构建完成，也就是CSS资源加载完成(或者CSS资源加载失败)后，才能开始渲染。因此，CSS加载是会阻塞Dom的渲染的。
• 由于js可能会操作之前的Dom节点和css样式，因此浏览器会维持html中css和js的顺序。因此，样式表会在后面的js执行前先加载执行完毕。所以css会阻塞后面js的执行。

为了避免让用户看到长时间的白屏时间，我们应该尽可能的提高css加载速度，比如可以使用以下几种方法:

• 使用CDN
• 对css进行压缩(使用打包工具，比如webpack,gulp等，也可以通过开启gzip压缩)
• 合理的使用缓存(设置cache-control,expires等)
• 减少http请求数，将多个css文件合并等

3. 前端实现动画有哪些方式？

前端常用的动画实现方式有以下种：

• css3的transition 属性
• css3的animation 属性
• 原生JS动画
• 使用canvas绘制动画
• SVG动画
• Jquery的animate函数
• 使用gif图片

1. css3的transition

   用来设置样式的属性值是如何从一种状态平滑过渡到另外一种状态

   语法：

   transition: property duration timing-function delay;

   transition是一种简写属性,它可以拆分为四个过渡属性。你可以 transition: 值1，值2，值3，值4 这样写，也可以：transition-property: 值1;，transition-duration:值2;，transition-timing-function:值2;，transition-delay:值4;

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

2. css3的animation

   animation属性：类似于 flash 中的逐帧动画。逐帧动画是由关键帧组成，很多个关键帧连续的播放就组成了动画在 CSS3 中是由属性keyframes来完成逐帧动画的。

   animation属性与transition属性的区别：

   • transition只需指定动画的开始和结束状态，整个动画的过程是由特定的函数控制,你不用管它。
   • animation可以对动画过程中的各个关键帧进行设置

3. 原生JS动画
   主要是通过setInterval或setTimeout方法的回调函数来持续调用改变某个元素的CSS样式以达到元素样式变化的效果。

   js实现动画通常会导致页面频繁性重排重绘，消耗性能，一般应该在桌面端浏览器。在移动端上使用会有明显的卡顿。

4. 使用canvas绘制动画
   canvas作为H5新增元素，是借助Web API来实现动画的。

   Canvas主要优势是可以应对页面中多个动画元素渲染较慢的情况，完全通过javascript来渲染控制动画的执行。可用于实现较复杂动画。

5. SVG 动画

   SVG是一种基于XML的图像格式，非常类似于HTML的工作方式。它为许多几何形状定义了不同的元素，这些元素可以在标记中组合以产生二维图形。同样高清的质地，矢量图不畏惧放大，体积小。
   因为 SVG 中保存的是点、线、面的信息，与分辨率和图形大小无关，只是跟图像的复杂程度有关，所以图像文件所占的存储空间通常会比 png 小。

   SVG动画的优势：

   • 优化 SEO 和无障碍的利器，因为 SVG 图像是使用XML标记指计算机所能理解的信息符号，通过此种标记，计算机之间可以处理包含各种信息的文章等)来标记构建的，浏览器通过绘制每个点和线来打印它们，而不是用预定义的像素填充某些空间。这确保 SVG 图像可以适应不同的屏幕大小和分辨率。
   • SVG 图像比 JPG 或 PNG 图像更灵活，而且我们可以使用 CSS 和 JavaScript 与它们进行交互。SVG 图像设置可以包含 CSS 和 JavaScript。
   • SVG 提供了一些图像编辑效果，比如屏蔽和剪裁、应用过滤器等。并且 SVG 只是文本，因此可以使用 GZip 对其进行有效压缩。