2、em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小事，仍然是相对大小但相对的只是HTML根元素。
4、区别：IE无法调用那些使用px作为单位的字体大小，而em和rem可以缩放，rem相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器已支持rem。
1.定位
2.尺寸
3.浮动
4.最初的布局——table
5.两栏布局（浮动和定位）
6.三栏布局（flex，圣杯和双飞翼： https://www.jianshu.com/p/f9bcddb0e8b4 ）
7.移动端的布局（媒体查询，flex弹性盒子（ https://github.com/laizimo/zimo-article/issues/13 ），rem适配（ http://www.cnblogs.com/lyzg/p/4877277.html ））
8.grid布局
摘自： https://segmentfault.com/a/1190000011358507
1.flex方式（适用于居中元素元素宽高未知），但是这种方式仅限于body里面只有一个子元素，如果body里面有多个div不行
2.绝对定位和负边距（适用于居中元素的宽高是固定的）
3.CSS3的transform属性（适用于居中元素元素宽高未知）
4.margin:auto
1.transform
transform属性是静态属性。它其实只是一个静态属性，需要配合transition和animation才能展现出动画效果。你可以把它看成是跟left、top等属性一样，只是一个静态样式而已。它可以让元素偏移、伸缩、变形、旋转等。
2.transition,它属性是一个简单的动画属性，非常简单非常容易用。可以说它是animation的简化版本，是给普通做简单网页特效用的。
3.Animation
https://www.jianshu.com/p/f9bcddb0e8b4
进度条效果做为网站常用模块无论是投资理财类、还是众筹类、加载提示类网站已经比较常见。另外，HTML5新增了 progress 标签，其重要程度可见一斑。
由于HTML的 progress 存在兼容性问题，本文主要讲解如何通过CSS实现一个简单的自定义进度条效果！
前端开发常用的进度条效果如下：
（环形进度条下次再讲！）
这两个算是比较有代表性的，一个的均匀的一个的不均匀的，实现起来略有不用。
以第一个为例：
这种比较简单，只需要两个 div 标签就可以了（一个标签也可以实现，后文会讲到）
原理介绍：
外层 div 用来显示进度条总长度以及背景色；内层div用来显示当前进度条进度，和当前进度条颜色。
结构如下：
样式如下：
此时效果如下：
只需要利用 js 动态控制上层 div 的宽度就可以实现最简单的自定义进度条了.
** 第二种带原点的进度条 **
此时实现原理跟第一种类似，只是背景色替换成了背景图片，图片如下：
这两个图片除了颜色不一样以外其他是一样大小的！
如果上面的能理解我想这个就不难理解了吧，不过为了显得文章完整还是简单做一个demo如下：
效果如下：
这次要实现的目标是类似这种，纵向滚动时表头固定，横向滚动时，表头跟着滚动
最基础的思路就是表头和内容是用两个表格来显示（图来自 https://zhuanlan.zhihu.com/p/33280304 ），关于怎么保存表头和内容列宽一致链接里这个文章里也有写就不另外说了。
纵向滚动是挺好实现的，我开始是在内容的表格外面套了一个div，之后设置 overflow-y:auto 就实现纵向滚动了。
但横向滚动呢？
首先想到的方案是在最外面的div,outer加上 overflow-x:auto
虽然这样横纵都能滚动了，但是横向滚动的时候纵向滚动条也被滚走了。
然后想到了是用js来同步，可以是可以的，但是还是想挣扎一下。
之后想到了fixed，发现如果表头设置为fixed无论横向滚动还是都会被固定在原地。
最后突然想到一个position的新属性，sticky
设置了 position: sticky ，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果（ https://www.cnblogs.com/s1nker/p/4835079.html ）。
所以最后设置了表头
css:
就成功实现了想要的效果了。
不过sticky的兼容性也是要考虑一下的。
