这段时间学习了css的布局、定位、动画等内容，现在做一个小小的总结。
css布局：
所谓布局，就是把页面分成一块一块，按照左中右、上中下等排列，布局分为固定宽度布局和不固定宽度布局，而响应式布局就是在PC上固定宽度，在手机上不固定宽度，也就是混合布局。css布局有float布局、flex布局、grid布局，如果需要兼容IE，就应该选择float布局，其他布局方式在IE上的兼容性很不好，如果在不需要兼容IE的情况下只兼容最新浏览器，就应该选择最新的grid布局，这种布局方式很强大，能够减少很多工作量，但是这种布局方式的兼容性普遍还不太好，在不兼容IE的情况下还要考虑其他多种浏览器的话，最好就要选择flex布局。
css定位：
布局是屏幕平面上的，定位是垂直于屏幕，对于一个div元素来说，它是具有层次的，从下到上依次是背景、边框、块级子元素、浮动元素、内联子元素，而对于设置了定位position属性的元素，如果其z-index属性值大于等于0，那么它的层级就位于div元素的内联子元素之上，如果z-index属性值小于0，那么它的层级则位于背景之下。但是在一个层叠上下文里，元素的分层就不能只根据z-index的大小来判断，因为每一个层叠上下文就像是一个新的小世界，在这个小世界里的z-index与外界无关，只有处在同一个小世界的z-index才能比较。
css动画：
首先需要了解一下浏览器的渲染过程，这个过程有以下几个步骤：1.根据HTML构建HTML树。2.根据CSS构建CSS树。3.将两棵树合并成一棵渲染树。4.进行布局，根据文档流、盒模型来计算元素的大小和位置。5.进行绘制，描绘元素的边框颜色、文字颜色、阴影等。6.根据层叠关系进行合成，展示画面。
通过设置一定的动画改变元素的样式，会有三种不同的渲染方式，第一种：从第一步开始渲染，包括布局、绘制、合成等所有过程，例如让某一个元素消失，div.remove()，则会让其他元素重新布局。第二种：跳过布局，也就是不会改变元素的大小和位置，渲染过程从绘制开始，例如改变背景颜色。第三种：跳过布局和绘制，只需要最后合成，例如改变transform。
css动画中用到的主要属性有transform、transition、animation。
transform：四个常用的功能是translate、rotate、scale、skew，分别控制元素的位移、旋转、缩放、倾斜。
transition：作用是补充中间帧，实现过渡效果，它的语法是：transition：属性名 时长 过渡方式 延迟，需要注意的是并不是所有属性都能过渡，例如display：none要变为display：block就不能过渡。这个属性的过渡必须要有起始，一般只有一次动画，或者两次。
animation：这个属性可以实现多个动画之间的过渡，但是在使用的过程中需要声明关键帧，声明关键帧的格式如下图所示：
animation的语法是：animation：时长 过渡方式 延迟 次数 方向 填充模式 是否暂停 动画名，语法中的各种属性之间可以交换顺序，其中的动画名就是在声明关键帧时所设置的名字。
