如何高效学习css之前在工作中用css做过很多有趣的事情，比如用css画图标、写轮播、写动效、做布局等等，但是这些应用的实现依赖于css的基础html和css知识。根据我自己的学习经验，我们需要掌握以下基础知识：Css基本语法结构和属性设置Css盒模型Css定位方法Css布局CssBFC（块级格式上下文）Css伪类和伪元素Css媒体queryCsstransition掌握动画基础知识后，可以多写案例，借鉴别人的优秀经验。这里给大家分享一个我刚开始学习前端的网站“https://codeguide.co/”。这个网站有很多前端的基础知识和最好的体验，还提供了很多经典的代码片段供我们学习参考：有趣的讲前端，同时学习离不开书，阅读经典书籍可以让我们更深入地了解语言本身，这里我也给大家分享一下我之前认为的好又深入的css书籍：《Css世界》《Css揭秘》这两本书看完相信大家会对css有了更深的理解。接下来给大家分享几个非常不错的css库。好用的css库共享很多时候我们在实际工作中很少会用到纯css工具库。一般情况下，我们尽量手写，但是当涉及到一些复杂的动画交互时，使用现有的第三方库对我们来说还是很困难的。高效，这里放几个我之前经常用到的css库。1.hover.css有趣的说一下前端开箱即用的鼠标悬停动画，支持的动画类型有：2DTransitions(二维过渡)BackgroundTransitions(背景过渡)IconsTransitions(图标过渡)BorderTransitions(边框transition)ShadowandGlow（阴影过渡）SpeechBubbles（气泡效果过渡）Curls（卷积过渡）如果大家有类似的应用场景，不妨参考一下。2.animate.css趣谈前端是一个简单方便的跨浏览器CSS动画库，提供非常丰富的动画效果。目前在很多开源项目中都有使用，H5-Dooring和DooringX也内置了很多动画效果。如果你有类似的应用场景，不妨参考尝试一下。3、MagicFunTalk前端集成了一个css动画库，具有各种特殊的动态效果。动画效果非常震撼。如果你想做一个很酷的网站，不妨参考一下这个CSS库。4.cssshakeFunTalk一个前端CSS库，可以让DOM元素震动摇摆，在移动端模仿手机震动和QQ窗口震动，还是很有意思的。5.hint.css趣谈一个纯css和html实现的前端提示库。体积超小，对于一些位置固定的提示场景很有用，不用担心包太大的麻烦~6.kite讲的是一个兼容性和灵活性都很好的前端css库。使用inline-block，基于OOCSS和MindBEMding，可以帮助我们快速构建组件。
