相邻的两个inline-block节点为什么会出现间隔，该如何解决？
元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。
1.方法之移除空格
元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了。
2.使用margin负值
3.让闭合标签吃胶囊
4.使用font-size:0
这个方法，基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。
5.使用letter-spacing
该方法可以搞定基本上所有浏览器。
CSS 垂直居中有哪些实现方式？
absolute + margin实现
方法一：
方法二：
absolute + calc 实现
absolute + transform 实现
转行内元素
flex
方法一：
方法二：
grid
方法一：
方法二：
方法三：
方法四：
怎么做移动端的样式适配？
px2rem-loader 插件
怎么实现样式隔离？
1.CSS modules
将 css 代码模块化，可以避免本模块样式被污染
依赖webpack css-loader，配置如下，现在webpack已经默认开启CSS modules功能了
这样，就产生了独一无二的
class，解决了CSS模块化的问题
优缺点分析
优点
- 能100%解决css无作用域样式污染问题
缺点
- 代码可读性差，hash值不方便debug
2.CSS in JS
它的核心思想是把CSS直接写到各自组件中，也就是说用JS去写CSS
CSS in JS虽然简单，但是通常会在运行时动态生成CSS，造成一定运行时开销
优点
- 没有无作用域问题样式污染问题
- 没有无用的CSS样式堆积问题 CSS-in-JS会把样式和组件绑定在一起，当这个组件要被删除掉的时候，直接把这些代码关联的css也直接删除掉就好了
缺点：
-
代码可读性差 大多数CSS-in-JS实现会通过生成唯一的CSS选择器来达到CSS局部作用域的效果。这些自动生成的选择器会大大降低代码的可读性，给开发人员debug造成一定的影响
-
运行时消耗 由于大多数的CSS-in-JS的库都是在动态生成CSS的。
3.预处理器
CSS 预处理器是一个能让你通过预处理器自己独有的语法的程序
市面上有很多CSS预处理器可供选择，且绝大多数CSS预处理器会增加一些原生CSS不具备的特性，例如
- 代码混合
- 嵌套选择器
- 继承选择器
这些特性让CSS的结构更加具有可读性且易于维护
要使用CSS预处理器，你必须在web服务中安装CSS编译工具
我们常见的预处理器：
优缺点分析
优点：
- 利用嵌套
- 可读性好
缺点
- 需要借助相关的编译工具处理
预处理器是现代web开发中必备，
结合BEM规范，利用预处理器，可以极大的提高开发效率，可读性，复用性
4.vue scoped
当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素
通过使用 PostCSS 来实现以下转换：
使用
scoped 后，父组件的样式将不会渗透到子组件中
5.BEM
BEM是一种css命名方法论，意思是块（Block）、元素（Element）、修饰符（Modifier）的简写
这种命名使得团队开发规范和方便维护
也就是模块名 + 元素名 + 修饰器名
如.dropdown-menu__item--active
总结：
