css系列

在项目中，常常会碰上这么个效果，就是当页面滚动时要使某个元素（如导航栏、侧边栏、表态之类的）滚动到指定的位置不再滚动。要想实现这个效果，就得用到sticky粘性定位。

定位元素主要掌握relative和absolute，前者主要用来限制绝对定位和做一些微调或者提高z-index的。后者利用其自身的跟随性，可以做到无依赖定位，不必依赖相对定位来使用top left。

float和BFC是面试中常见的问题，float的作用是为了形成文字环绕，因此需要脱离文档流，让后面的内容替补进入。BFC是形成一个独立的空间，不影响外部的元素。

这是css的实战项目，在工作中其实很多人对css不屑一顾，但是真正能把css写好的人不多，本文模仿ant-design-pro的网页，利用css实现了一个基本功能。

css变量是css新的规则，并且被大部分浏览器所兼容，它提供了一种和js沟通的桥梁。css变量最常用的场景是换肤，根据用户喜好定义页面的颜色。

transform-origin在做一些css动画是非常重要的一个点，这里对它的使用做了一个简要的归纳整理

做一个响应式网站需要弄懂它的布局是怎么做的，这里我们参照bootstrap实现了一个栅格系统。同时在开发网站的时候需要注意的一些事项。

grid布局在工作中用的比较少，但是对于一些复杂的布局场景能起到非常好的效果，它能解决一维布局中许多不好实现的场景。

flex是一种用于按行或者按列布局元素的一维布局方法。其中主要掌握容器及子项的对应样式，同时要掌握垂直居中，等高布局，sticky footer布局等常规布局方法

主要介绍了transition补间动画，animation关键帧动画以及逐帧动画。transition和animation的主要区别是是否有状态的发生。

整理了一些工作中使用到的样式，对其中容易忽略的点进行了详细描述，比如background-clip， clip-path，等

主要介绍在工作中如何使用伪元素before和after，实现一些特殊效果，比如动态改变div里面的属性，伪元素里面的内容也会发生变化等。

css选择器是前端的基础，但是有些地方并不是很好理解，这里对一些不好理解的以及工作中常用的进行一个归纳整理，不常用的这里略过。