CSS语法规则与布局一次搞定

上传不了svg。
原地址

结合之前对CSS知识框架的整理，这周末把语法规则和布局全部梳理了一遍。

学习思路如下：

语法规则方面主要是：选择器、单位、@rules，直接过了一遍MDN，其实常用也就那几个。

Layout先看的CSS Layout，短小精悍，半小时就能搞定。

Flexbox和Grid都看的CSS Tricks，写得真的不错！第一遍边看边写，第二遍就把它整理下来。

一共整理了四张XMind: 语法规则、Layout、Flexbox、Grid，其中Layout里面主要是传统的布局方案，而Flexbox和Grid是单独拿出来讲的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qyKfYFwu-1619943497428)(/img/post-css-layout.svg)]

Layout

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aRGcLe0C-1619943497431)(/img/post-css-flexbox.svg)]

Flexbox

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YJIeoGiI-1619943497432)(/img/post-css-grid.svg)]

Grid

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fBOhV3ST-1619943497434)(/img/post-css-rules.svg)]

CSS Rules

接下来就把常用的样式再整理分类一下，然后CSS动画得系统的再学一下