「这是我参与2022首次更文挑战的第20天，活动详情查看：2022首次更文挑战」
前言
整理一下前端面试CSS相关的八股文，熟悉一些基础知识，做一下总结，也方便以后的查看，本文提到的例子等内容大部分都是在vue中的使用情况，毕竟本人目前就只会vue。
@import和link的作用
link和@import都是引入外部的CSS样式的方法，它们的不同点在于以下几点
- link加载css样式的时机比@import加载css样式的时间早，@import是在页面完全加载后采取加载，link是和页面同时加载
- link是一个标签，除了可以加载css外还可以定义一些属性，@import只能用来载入css
- link的兼容性更好，因为它是一个标签
- link支持js控制DOM来改变样式，@import不行
transition、animation
首先这两个在某种程度上来说都可以说是动画。如果非要详细的划分的话，那transiton可以理解为是一种过渡，并且它必须有一个触发事件（hover、click、focus等），并且它只能设置开始帧的状态和结束帧的状态。
animation是真正意义上的动画，它可以设置一个时间自己运行，不需要特定的触发事件，并且可以设置任意帧的效果。使用实例如下
@keyframes myAnimation {//首先定义一个效果，这里是闪烁
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.type-warn {
animation: myAnimation 0.8s infinite;//调用
}
一般情况下，一次的动画效果用transition就行，循环的动画效果用animation比较好
translate和绝对定位
translate改变盒子位置的时候不会引起浏览器的回流或重绘，绝对定位会触发回流，transform使用到的是GPU，绝对定位使用到的是cpu，所以transform效率更高，还有一点就是通过translate改变位置的时候，元素依然是占据的其原始空间，绝对定位会改变元素的真实位置。
li标签之间有间隔的原因及解决办法
原因： 渲染的时候会把inline内联元素之间的空白字符（tab、换行、空格）渲染成空格。而li之间出现间隔就是因为换行，因为我们常把每个li标签单独放在一行。这时候换行符就渲染成了空格。
解决方法：
- 最简单的就是把li标签都写在一行中，但是这样代码看起来不是很舒服。
- 给li标签设置浮动效果，但浮动这种操作总是容易出现各种问题的，所以少用
- 给父标签设置font-size：0,也就是给li设置，但这时候你就要从新给li标签设置font-size了，并且这种方法在sarfari中不支持
- 既然是因为字符间隔出现的空白（空格是一个字符），那么不妨直接把字符间隔给设置成一个负值，也就是给ul设置letter-spacing:-8px, 但这是也要重新给li设置上字符间隔letter-spacing：normal
