CSS 令人困惑？你不是一个人

当我开始 Web 开发之旅时，就像其他人一样，我从基础知识开始：学习 HTML，然后是 CSS，然后是 JavaScript。我只是想尽快构建东西，所以我只学到了足以让自己开始构建项目的知识，然后当我偶然发现或发现需要时，我会查找新的东西。
这种方法的一个优点是我能够快速构建小型项目，但这种方法也有一个主要缺陷，它在学习中留下了很多空白。

快进到现在，我正在学习 ReactJS，并且很享受它，但是每当涉及到样式组件时，这都是令人沮丧和违反直觉的，因为 CSS 在我的头脑中感觉不太清楚。我只是添加属性来实现我想要的结果，但一路上的某个地方，感觉就像走在一座古老的桥上，等待因一个错误的举动而倒塌。

事实证明，CSS 并不像我想象的那么令人困惑或困难。事实上，我只是没有正确的 CSS 思维模型。
一般来说，人们将 CSS 视为属性（键：值对）的集合，以实现所需的外观或排列。但现在这对我来说已经改变了，希望你在本文结束时也能改变。

1. 不要将 CSS 视为属性的集合。相反，将 CSS 视为布局模式的集合

• CSS 由许多不同的布局算法组成，称为布局模式。
• 每种布局模式就像 CSS 中自己的子语言一样，可以重新定义和更改 CSS 属性的使用方式。 换句话说，CSS 属性是这些算法的输入。所以，专注于这些算法如何使用这些属性，而不是记住一堆属性。

2.每种布局都是为了解决特定问题而设计的

• 默认布局模式：Normal Flow，用于创建数字文档。
• 类似于MS Word的布局算法。 IE。标题和段落作为块垂直堆叠，而文本、链接和图像等内容则位于这些块内。
• 除了普通流程之外，您最常使用的另外两种布局模式是 Flexbox 和 Grid 布局。

3.Flexbox 和 Grid 布局模式

• 再次强调，每种布局模式都是为了解决特定问题而创建的。可以这样想： Flexbox 解决了什么问题？

• Flexbox 旨在以极大的灵活性将一组项目排列在行或列中，并控制每个项目在组内的分布和对齐方式。

  立即学习“前端免费学习笔记（深入）”；

• Grid 解决了什么问题？
  CSS 网格使得在二维中排列和对齐一组项目变得更加容易。它使您能够灵活地控制每个单独的项目或项目的行/列来操纵它们的排列。

一旦您开始从布局模式集合的角度思考 CSS，以及它们如何影响和修改 CSS 属性，即使 CSS 跨越很多行，您也会对事情的发生方式有一个更清晰的思维模型。