54个CSS重难点整理，12-24篇，进阶高薪必需要掌握的知识点

本次我把CSS中的重难点整理出来，总共54个核心知识点，供大家复习，希望能帮到大家。这些重难点是进阶高薪必需要掌握的知识点，同时也是面试必问的内容。

因为涉及的内容较多，我分5篇内容发出来，好逐一进行让大家消化这些内容，本次我把前13-24个CSS重难点整理出来，具体内容如下：

• 13、如何判断元素是否到达可视区域（图片懒加载原理）？
• 14、link与@import的区别？
• 15、常见的图片格式与场景？
• 16、对CSS Sprites（精灵图）的理解？
• 17、CSS预处理器、后处理器是什么？作用是什么？
• 18、常见的CSS单位；
• 19、CSS优化和提高性能的方法？
• 20、为什么有时候用translate来改变位置而不是定位?
• 21、清除浮动的3种方式
• 22、position的属性有哪些？共同点与不同点？
• 23、display 、 float、position三者关系？
• 24、transform先平移在旋转和先旋转再平移有什么区别？

13、如何判断元素是否到达可视区域（图片懒加载原理）？

以下图为例来讲解

• window.innerHeight 是浏览器可视区的高度；
• document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离；
• img.offsetTop 是元素顶部距离文档顶部的高度（包括滚动条的距离）；
• 内容达到显示区域的：img.offsetTop < window.innerHeight + document.body.scrollTop;

14、link与@import的区别？

① 两者都是引用外部 CSS 的方式

• link方式

<link rel="stylesheet" href="basic.css">

• @import方式

可直接在style标签中引入外部CSS，也可以在css文件中引用外部css

<style>
   @import url(css/style.css);
</style>

② 两者的区别

区别点	link	@import
从属关系	link是HTML提供的标签，不仅可以加载CSS，还可以定义rel等属性	@import是css提供的语法，只有导入样式表的作用
加载顺序	l