提升 CSS 水平的 5 个步骤

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

好久没写CSS相关的文章了。各位开发者朋友们，大家好！今天我们将探讨“提升CSS水平的5个步骤”，相信这些步骤对大家会很有帮助。让我们一起来看看吧……

理解定位语境

如果你想深入理解如何使用 CSS 将 HTML 元素移动到你想要的位置，就必须掌握定位上下文。我指的不是浅尝辄止，而是对它们的区别、行为、特性等等有透彻的了解。

这里你需要了解五个位置值，它们分别是：

• 静止的
• 固定的
• 相对的
• 绝对
• 继承

但真正改变格局的两大关键因素是绝对定位和相对定位。

当你刚开始学习 CSS 时，浮动似乎是你能想象到的最糟糕的布局系统之一。一旦你掌握了浮动的基本用法，接下来你还得学习如何处理只包含浮动子元素的父元素的高度折叠问题，而这又引出了 47 种不同的解决方法，比如使用clearfix和溢出操作。

（尽量少用）

认识你们这些选择者

编写优秀简洁的 CSS 的关键之一是充分掌握可用的 CSS 选择器、它们的工作原理以及它们在各种浏览器上的支持程度。这听起来像是一个很简单的话题，但实际上，CSS 选择器的世界相当复杂。

（多花些时间练习）

学习干代码概念

“不要重复自己。 ”这句简单的格言在编程中却有着深远的影响。当你深入实践 DRY（Don't Repeat Yourself，不要重复自己）原则时，你会得到更简洁的代码、更少的工作量，以及一个令人愉悦的全新工作流程，它不仅能让你事半功倍，还能让你感到无比轻松。与前面提到的其他较为狭窄的主题不同，DRY 是一个涵盖各种实践、技巧和理念的庞大领域。

（尽量使用简写）

了解您的浏览器支持情况

提升 CSS 水平的第五个也是最后一个关键是了解哪些方法在这里有效。CSS3 对我们大多数人来说都极具吸引力，难以忽视，但残酷的现实是，其中很多功能在某些浏览器（我所说的“某些浏览器”当然指的是 IE）中无法正常工作。

新手网页开发者需要记住的最大秘密不是要记住每一个 CSS 特性以及所有浏览器是如何处理它们的，而是有很多很棒的资源可以免费提供这些信息，你只需要知道去哪里找。

概要

• 调整你的思维定位
• 背景
• 主浮子
• 了解你的选择者
• 学习DRY编码概念
• 了解您的浏览器支持情况

资源：

• 浏览器支持

⚡感谢阅读 | 祝您设计愉快😎