灵活运用CSS开发技巧，希望能帮助到大家！

【很多时候跟着书和系统的视频网站学习，会发现没有方向，学了很多却不知道自己能够做出什么成绩。学习过程中会遇到很多问题，Web学习交流群可以帮到你】点击进入 一起学习，一起交流，准备了基础，进阶学习规划与资料，每天也会准时讲一些项目实战案例。

系列

• 灵活运用CSS开发技巧
• 灵活运用JS开发技巧
• 灵活运用PS切图技巧

前言

何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。

每写好一篇文章，都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景交融、首尾呼应、衬托对比、白描细描、比喻象征、借古讽今、卒章显志、承上启下、开门见山、动静相衬、虚实相生、实写虚写、托物寓意、咏物抒情等，这些应该都是我们从小到大写文章而接触到的写作技巧。

作为程序猿的我们，写代码同样也需要大量的写作技巧。一份良好的代码能让人耳目一新，让人容易理解，让人舒服自然，同时也让自己成就感满满(哈哈，这个才是重点)。因此，我整理下三年来自己使用到的一些CSS开发技巧，希望能让你写出耳目一新、容易理解、舒服自然的代码。 目录 既然写文章有这么多的写作技巧，那么我也需要对CSS开发技巧整理一下，起个易记的名字。

• Layout Skill：布局技巧
• Behavior Skill：行为技巧
• Color Skill：色彩技巧
• Figure Skill：图形技巧
• Component Skill：组件技巧

注

• 代码只作演示用途，不会详细说明语法
• 部分技巧示例代码过长，使用CodePen进行保存，点击在线演示即可查看
• 兼容项点击链接即可查看当前属性的浏览器兼容数据，自行根据项目兼容需求考虑是否使用
• 以下代码全部基于CSS进行书写，没有任何JS代码，没有特殊说明的情况下所有属性和方法都是CSS类型
• 一部分技巧是自己探讨出来的，另一部分技巧是参考各位前端大神们的，都是一个互相学习的过程，大家一起进步

目 录

• 第一章
• 第二章
• 第三章