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 和网格布局模式

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

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

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

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

以上是CSS 令人困惑？你并不孤单的详细内容。更多信息请关注PHP中文网其他相关文章！