前端布局技巧-前端响应式布局框架

Hi~，我是伊万周，如果我写的文章有幸得到你的青睐，那我就很幸运了~

写在前面

前端布局无论是在面试过程中，还是在工作中，都是非常重要的一环。 一个优秀的前端工程师可以在短时间内编写同一个布局的多个实现。 练习和掌握CSS布局方案可以提高我们的页面开发速度。

本文通过思维导图总结了八种前端布局。 每种类型至少包含 3 种实现方法。 因为是思维导图，所以不能显示过多的代码前端布局技巧，也没有代码高亮（这个很不友好。），但是我在思维导图中尽可能多的展示了核心的CSS代码，方便大家参考。

八类布局如下：

文中图片数据大于10M，流量用户请选择性阅读

水平居中

水平居中的实现非常简单，也是最常用的。 这里有7种方法，如下图所示：

垂直居中

垂直居中的使用率和水平居中差不多，实现起来也很简单。 这里有6种常用的方法

水平和垂直居中

要实现水平和垂直居中，只需要结合前面的方法即可。 这里有7种方法。

两列布局

所谓双列布局，就是一列固定宽度（宽度也可以由子元素决定），一列自适应的布局。 最终效果是这样的：

这里有 6 种实现两列布局的方法

三列布局

三列布局有两种主要类型：

这里总结了 5 种实​​现两列布局的方法

平等的布局

等分布局是将一个容器分成若干等份。 这里以4等分为例，总结4种实现方式。

粘性页脚布局

Sticky Footer布局是指当页面内容不够长时，底栏会固定在浏览器底部； 如果足够长前端布局技巧，底栏将跟在内容后面。 如下所示：

这里总结了4个实现

全屏布局

所有布局主要应用在后台，主要作用如下：

这里有3种实现方式

写在最后

这篇文章到此为止。 觉得本文对你有帮助的话，可以点个赞支持下哦~

文章中的图片可以直接保存到本地使用。 如果需要思维导图的原图或者源文件，可以找我要。