前端开发--从0开始学习CSS之显示属性

前言

很多做过APP，桌面客户端的同学，虽然对显示的那套东西规则已经很熟悉了，但仍然觉得学习CSS感觉很乱，不知道从哪里入手。今天，我们试着一起自顶向下整理学习CSS思路。

整理思路

先抛开CSS的细节，想想CSS的目的是什么？

和各种APP、桌面客户端的界面API一样，CSS的目的也是为了在 “显示器上显示像素”，考虑到现在的电脑设备，可以加上一个约束“

在显示器上显示内容

那么问题就来了？
1、在哪块区域显示？
2、显示什么？

我们以上述两个问题，以初中数学几何为基础进行问题延伸，得到下图。

image.png

相信每个人还能延伸出更多细节问题。

目前为止，我们还没用到任何和CSS有关的知识，接下来，我们就要开始根据上述问题，依次到CSS中去查，于是答案就出来了。

top
left
..
绝对定位
相对定位
...
flex布局
grid布局
...
color
background
...
box-shadow
...
transform
...

一言以蔽之，我们在开始时，尽量采用自顶向下的方法，把学习的主动权掌握在我们手中，让CSS为我们的思路服务，当积累一定的CSS的知识后，再去深入学习。这样可以更快更有效的掌握一门新知识。