同为程序员，在细分工种下，前端和其他方向的一个最大的区别就是除了写代码之外，还要和视觉层面上的图形打交道，对我来说这也是前端最大的魅力，因为我深知图形之美以及其奥妙之处。不过并不是所有前端都会深入图形领域，但对于所有前端来说有一门图形相关的入门课倒是必修的，那就是图标管理了。

这是一道很经典的面试题，可以说考察了前端知识的各个方面，其中每个点都有很多可以展开的地方。网络上的解析也不少，但大多数也都是不那么全面，干脆自己总结一版也顺便回顾一下相关知识。当然说是全览也有些标题党了，本意是尽可能的在前端知识领域涉猎范围内记录完整。

前端发展这么多年来，由于babel,webpack等工程化工具的快速发展，JS的模块化管理能力已经远远强于CSS，另外也有很大一部分原因在于JS本身作为一门编程语言就有自己的作用域，而CSS本身的特性决定了其规则都是全局作用域。但如果要实现项目的工程化，这又是不得不解决的一个难点，下面针对CSS发展以来一些比较流行合理的模块化方案分别做一个思路梳理。

块级格式化上下文是在CSS定位中非常有用的一个概念，它决定了部分元素的定位方式以及和其他元素的相互作用。下面从CSS布局开始来一步一步分析BFC的用法。

先看这样一个例子。

当上层的a浮动后，覆盖了下层的b。但当给b添加一个相对定位后，又覆盖了上层的a。

为什么一个relative定位属性就可以改变元素叠加的顺序呢？实际上就是元素的层叠规则在作怪。层叠规则就是CSS中的元素叠加后在视觉上谁上谁下的规则。为了深入理解这个规则，我们就从层叠顺序的应用范围——层叠上下文说起。

今天设计妹子有个要求让某个元素出现在浏览器中视口时触发某个动效。感觉是个比较常见的需求，因为浏览器中获取位置的方法实在是又多又杂，索性做个总结以后自己查起来也方便~

大家都知道，获取一个DOM元素的样式通过elem.style或者elem.getAttribute('style')都能实现。那么这两者有什么区别呢？