布局（Layout）

过去我们们在 HTML 中一般使用 CSS 进行布局，常见的布局有：单列布局、两列自适应布局、圣飞布局和双飞翼布局、伪等高布局、粘连布局。重点介绍下 Flex 布局和 grid 布局：

Flex布局

Flex布局，也叫弹性盒子布局，区区简单几行代码就可以实现各种页面的的布局。

//html部分同上.parent { display:flex;} .right { margin-left:20px; flex:1;}

推荐W3Cschool上的的Flexbox布局基础入门 ，可以更好的帮你掌握Flex。

grid布局

Grid 布局，是一个基于网格的二维布局系统，目的是用来优化用户界面设计。

//html部分同上.parent { display:grid; grid-template-columns:auto 1fr; grid-gap:20px} 对齐（Alignment）

大多数人都会把对齐（Alignment）当作 Flexbox 的一部分，但是这些属性适用于所有布局方法值得在这种情况下理解它们，而不是考虑“ Flexbox Alignment”或“ Flexbox Alignment” “ CSS网格对齐。” 我们有一组Alignment属性，它们在可能的情况下可以以一种通用的方式工作。然后，由于不同的布局方法的行为方式，它们会有一些差异。

尺寸（Sizing）

在 web 上，我们习惯用长度或百分比来设置尺寸，这就是我们如何使用浮动来制作网格类型布局的方法。然而，现代的布局方法可以为我们做很多空间分配——如果我们允许的话。值得花时间去了解 Flexbox 如何分配空间(或 Grid fr 单元如何工作)。

响应式设计（Responsive Design）

通常，新的 Grid 和 Flexbox 布局方法意味着我们可以使用比旧方法更少的媒体查询，因为它们非常灵活，可以响应视口或组件大小的变化，而无需我们更改元素的宽度。 但是，有些地方需要添加一些断点来进一步增强设计。

字体和排版

与布局一样，网络上的字体使用在发生了巨大的变化。现在，可变字体，使单个字体文件具有无限的变化。 要了解它们是什么以及它们如何工作，请观看Mandy Michael的精彩简短演讲：可变字体和网页设计的未来。 另外，我会推荐Jason Pamental的动态排版与现代CSS和可变字体。

为了探索可变字体和它们的功能，微软提供了一个有趣的演示，以及一些尝试可变字体的游乐场 - Axis Praxis是最知名的（我也喜欢字体游乐场）。

MDN上的指南将证明一开始使用可变字体是非常有用的。要了解如何为不支持可变字体的浏览器实现回退解决方案，请阅读 Oliver Schondorfer的《使用回退Web字体实现可变字体》Firefox DevTools字体编辑器还支持使用可变字体。

变形和动画

CSS转换和动画绝对是我需要知道的基础。 我不经常需要使用它们，在使用时会忘记语法。 值得庆幸的是，MDN上的参考资料帮助了我，我建议从使用CSS变换和使用CSS3动画的指南开始。 Zell Liew也有一篇很好的文章，为CSS过渡提供了很好的解释。

要发现一些可能的事情，请查看Animista网站。

关于动画可能令人困惑的事情之一是采取哪种方法。 除了 CSS 支持的内容之外，你可能还需要涉及 JavaScript ，SVG 或 Web Animation API，而这些事情往往都会被混为一谈。 在她的演讲中，选择你的动画冒险记录在事件中，Val Head解释了这些选项。

使用参考手册

在使用 Grid 或 Flexbox 很多人会很依赖w3cschool上的CSS参考手册 ，如果没有参考手册就没法工作。这是没有问题的，前面我们也提到可以合理的利用参考手册来提升开发效率，但是前提是得先理解透原理。否则我们在复制语法时，可能会忽略为什么要这样写。然后，当遇到该属性似乎表现不同的情况时，这种明显的不一致会令人困惑找不出问题出在哪。

CSS 是一门经过多年进化的语言，一直在更新，如果是把自己当成学习者的心态来学习的话，永远也是学不完的。然而，一旦你把基础知识及底层原理打牢了以后，你就可以很轻松的面对各种变化了。如果要系统的学习前端推荐学习W3Cschool上的从0基础到前端开发 课程。

以上就是编程狮为你整理的关于web前端开发初学者如何科学的快速学会CSS？的全部内容，希望给对css望而生畏初学者有所帮助，如果你有更好的学习方法欢迎分享~