阅读 42

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动画得系统的再学一下

文章分类
前端
文章标签