圣杯布局 和 双飞翼布局 一直是前端面试的高频考点，圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》 。 比起双飞翼布局，它的起源不是源于对页面的形象表达。在西方，圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED，可以说是灵感来自于页面渲染。
原本录制了一个小视频，奈何不能上传到博客中，视频中通过缩放页面可以发现随着页面的宽度的变化，这三栏布局是中间盒子优先渲染，两边的盒子框子宽度固定不变，即使页面宽度变小，也不影响我们的浏览。 注意：为了安全起见，最好还是给body加一个最小宽度!
|
|
【1】浮动
【2】flex弹性盒子
【3】grid布局
如上图所示，我们把body划分成三行四列的网格，其中有5条列网格线
学习CSS并不单单只是学习css，还有很多东西要学，简单的给你列一下，希望可以帮助到你：1、学习CSS必须先学会Dreamweaver或者其他的编写代码的软件，不过推荐使用DW，一则比较容易上手，而来你编写CSS代码也比较方便。
2、有了DW的基础你就可以开始学习CSS了，这个你就先要了解CSS的命名规则以及一些简单的语法，如果你需要更加熟练的掌握他并运用好他，成为一名优秀的设计师的话，最好学习一下C语言，然后再去学习一下js、ajax这些脚本语言，对你日后的工作或者学习有很大帮助。因为很多很炫的效果都是通过ajax以及CSS相互配合完成的。
3、最好能够会PS，其次会FW，这些都会成为你完成作品的最好的工具。
4、前期也许你不会写很好的CSS代码，你可以先去网上下载一些CSS模版，那些都是非常好的，你可以先看看人家是怎么写的，然后自己学着写，慢慢的你就熟悉了，其实很简单的。
5、学什么都要有耐心和进取心，不能太浮，一定要沉下去，这样你才会完全掌握他精通他。
对于刚刚入门的新人来讲，给你说了再多东西你也是记不住的，你这种情况我还是觉得到慕课网上看些教学的指导视频。全部公 开可以看得，你先学习一下咯，这也是我一直以来积累的经验。希望对楼主有帮助
