首页 > web前端 > css教程 > CSS 令人困惑?你并不孤单

CSS 令人困惑?你并不孤单

WBOY
发布: 2024-07-30 19:30:35
原创
794 人浏览过

CSS is confusing? You

当我开始 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中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板