您在2022年绝对必须知道哪些CSS？

CSS 的发展日新月异，功能日益强大，学习曲线也随之陡峭。本文将探讨在当今前端开发中，哪些 CSS 知识是绝对必须掌握的。

Sacha Greif 曾公开质疑 CSS 是否过于庞大。近年来浏览器新增了诸多特性——容器查询、相对颜色语法、级联层、逻辑属性、媒体查询范围、独立变换、:has() 选择器等等，未来还可能出现 CSS 切换、嵌套、颜色混合、滚动链接动画、作用域样式等。这无疑为新手和资深前端工程师都带来了新的学习挑战。

全面掌握所有 CSS 属性及其工作原理已成为过去式。那么，哪些 CSS 知识是绝对必须掌握的呢？

Vincas Stonys 和 Chris 分别尝试列出了相关的清单。如果您需要列出最重要的五个 CSS 属性和选择器，我的清单如下：

writing-mode 属性

writing-mode 属性至关重要，尤其是在学习方面。它帮助您掌握包容性设计原则，无论用户的语言如何，都能创建合适的布局。理解 writing-mode 将引导您理解逻辑属性和值，进而理解文档流，并从块、内联、起始和结束等逻辑方向而非物理方向思考。

display 属性

没有扎实的 display 属性知识，很难写出优秀的 CSS 代码。它既是属性，也是创建布局的框架。没有它，就没有 Flexbox 或 CSS Grid，因此它是理解这些重要特性的关键。

此外，display 属性与 writing-mode 属性相辅相成。一旦 writing-mode 使您了解了文档流和逻辑方向，display 属性正是您所需要的。您可以使用它来更改元素的正常流（例如，将块元素更改为内联元素）或开始布局（例如，创建灵活的布局上下文）。

margin、padding 和 border 属性

这三个属性是盒子模型的一部分，都用于控制间距和样式，都需要了解 CSS 长度单位。了解这些属性的功能以及它们如何影响元素的计算大小，将极大地提高您的样式控制能力，并消除元素大小不符合预期的常见 CSS 问题。

::before 和 ::after 伪元素

::before 和 ::after 是两个伪元素，通常一起学习。它们可以用于创建各种 UI 效果，甚至完整的单 div 插图，展现了 CSS 的强大功能。

@media 查询

@media 查询是创建灵活的响应式布局和不同查看上下文的关键。随着容器查询的成熟，它可能会被取代，但目前，@media 查询是学习响应式设计的绝佳入门。

此外，@media 查询让您初步了解 CSS 的条件特性。无论是基于设备类型（例如，屏幕或打印）还是浏览器视口条件（例如，宽度 >= 768px），@media 语法都非常有用，可以创建针对不同条件优化的布局。@media 查询还与辅助功能相关，因为它可以根据用户的偏好（例如，prefers-reduced-motion）应用样式。

其他值得一提的属性和选择器

当然，还有许多其他重要的 CSS 属性和选择器，例如：

• calc()
• has()
• color
• font
• overflow
• position（尤其重要）
• z-index

学习 CSS 比死记硬背属性列表更重要。这是一个循序渐进的过程，我选择的五个属性和选择器可以帮助您打下良好的基础，并为更深入地学习 CSS 做好准备。

以上是您在2022年绝对必须知道哪些CSS？的详细内容。更多信息请关注PHP中文网其他相关文章！