共计 1803 个字符，预计需要花费 5 分钟才能阅读完成。
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
学透 CSS 可能是一个相当大的挑战。但没有啥捷径，只能多练多写。不过还是有一些乏味的办法来学习的，就是通过游戏。本文将重点介绍十种你能够边玩边学习 CSS 的神奇游戏。
1. Flexbox froggy
地址：https://flexboxfroggy.com/
《Flexbox froggy》这是一个十分乏味游戏，次要用来学习 flex 布局。它有 24 个级别，难度逐步加深。咱们能够应用flex 相干的属性将青蛙放到正确的地位，即可过关。
2. Flexbox defense
地址：http://www.flexboxdefense.com/
《Flexbox defense》也是一个学习 flex布局的游戏，在这个游戏中，咱们必须通过 flex 布局，将炮台移到正确的地位，以捍卫一条路线不被攻打。它有 12 个级别，难度逐步加深，考查 flex 的程序也越深。
3. Knights of the Flexbox Table
地址：https://knightsoftheflexboxta…
也是一个学习 flex布局的游戏，不过它是采纳 TailwindCSS 格调，如果你喜爱用 TailwindCSS，那么这个游戏适宜你，它有 18 个级别，难度逐步加深，考查 flex 的程序也越深。
4. Flex Box adventure
地址：https://codingfantasy.com/gam…
《Flex Box adventure》也是一个学习 flex布局的游戏。它有 24 关，除了格调不同外，还有一个比拟人性化的体验，就是有提醒，如果咱们想不出答案，可通过提醒，找到咱们想要的正确答案。
5. Flexbox zombies
地址：https://mastery.games/flexbox…
《Flexbox zombies》也是一个学习 flex布局的游戏。这款游戏的画面设置得超级好! 我被这个故事情节的酷炫水平给震惊了。
6. Grid garden
地址：https://cssgridgarden.com/
《Grid garden》是学习 CSS 网格的一种超级乏味的形式。咱们必须应用网格布局来确保所有的胡萝卜失去水能力过关。它有 28 个关卡，能够练习大量的 CSS 网格选项!
7. Grid attack
地址：https://codingfantasy.com/gam…
这款游戏是由《Flexbox adventure》的同一个作者开发的，游戏体验也十分的好。
在游戏中，咱们必须应用 CSS 网格来扭转土地，使恶魔无奈生存。它有 80 个关卡，让咱们能够抉择超级乏味的形式学习 CSS 网格。
8. CSS Diner
地址：https://flukeout.github.io/
CSS Diner 是一个学习 CSS 选择器的游戏。通过题目，咱们须要写出具体的 css 选择器来抉择餐桌上指定的物品才算过关。当咱们选中物品时，会呈现乏味的动画特效，来减少咱们的游戏体验。
9. Guess CSS
地址：https://www.guess-css.app/
这个游戏与 CSS Diner 十分类似，给出一个画面，而后提供 3 上选项，咱们依据已有的常识在脑海里结构咱们的答案，而后从 3 个选项，抉择一个咱们认为的正确答案即可过关。
10. CSS Speedrun
地址：https://css-speedrun.netlify….
在这个游戏中，咱们要依据箭头的标记，而后写出对应的 CSS 选择器，这里有题目的计时，咱们必须尽可能疾速实现它，对那些喜爱在游戏中减少难度的开发者来说是一个很大的挑战。。
这个游戏有十个级别，你的以多玩几次，以提你解题速度。我在第三题就卡住了，大家道怎么解吗。
编辑中可能存在的 bug 没法实时晓得，预先为了解决这些 bug, 花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
参考：https://dev.to/dailydevtips1/…
交换
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
