当我开始 Web 开发之旅时，就像其他人一样，我从基础知识开始：学习 HTML，然后是 CSS，然后是 JavaScript。我只是想尽快构建东西，所以我只学到了足以让自己开始构建项目的知识，然后当我偶然发现或发现需要时，我会查找新的东西。
这种方法的一个优点是我能够快速构建小型项目，但这种方法也有一个主要缺陷，它在学习中留下了很多空白。
快进到现在，我正在学习 ReactJS，并且很享受它，但是每当涉及到样式组件时，这都是令人沮丧和违反直觉的，因为 CSS 在我的头脑中感觉不太清楚。我只是添加属性来实现我想要的结果，但一路上的某个地方，感觉就像走在一座古老的桥上，等待因一个错误的举动而倒塌。
事实证明，CSS 并不像我想象的那么令人困惑或困难。事实上，我只是没有正确的 CSS 思维模型。
一般来说，人们将 CSS 视为属性（键：值对）的集合，以实现所需的外观或排列。但现在这对我来说已经改变了，希望你在本文结束时也能改变。
不要将 CSS 视为属性的集合。相反，将 CSS 视为布局模式的集合CSS 由许多不同的布局算法组成，称为布局模式。每种布局模式就像 CSS 中自己的子语言一样，可以重新定义和更改 CSS 属性的使用方式。换句话说，CSS 属性是这些算法的输入。所以，专注于这些算法如何使用这些属性，而不是记住一堆属性。
2.每种布局都是为了解决特定问题而设计的
默认布局模式：Normal Flow，用于创建数字文档。 类似于MS Word的布局算法。 IE。标题和段落作为块垂直堆叠，而文本、链接和图像等内容则位于这些块内。 除了普通流程之外，您最常使用的另外两种布局模式是 Flexbox 和 Grid 布局。
3.Flexbox 和 Grid 布局模式
再次强调，每种布局模式都是为了解决特定问题而创建的。可以这样想： Flexbox 解决了什么问题？
Flexbox 旨在以极大的灵活性将一组项目排列在行或列中，并控制每个项目在组内的分布和对齐方式。
立即学习“前端免费学习笔记（深入）”；
Grid 解决了什么问题？
CSS 网格使得在二维中排列和对齐一组项目变得更加容易。它使您能够灵活地控制每个单独的项目或项目的行/列来操纵它们的排列。
一旦您开始从布局模式集合的角度思考 CSS，以及它们如何影响和修改 CSS 属性，即使 CSS 跨越很多行，您也会对事情的发生方式有一个更清晰的思维模型。
以上就是CSS 令人困惑？你不是一个人的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1629656.html
微信扫一扫 
支付宝扫一扫 
