写在前面
对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新,实现各种布局的方式已经多得数不胜数了。
本系列文章总结了 CSS 中的各种布局,以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。
前置技能
学习 CSS 布局不是学习的一个属性,也不是一个方法,而是众多属性、特性集一身的一种开发技巧。为了掌握这一开发技巧,我们前置需要学习一些关于布局的 CSS 属性以及一些概念和特性。该系列的目录如下:
- 【不一样的CSS】深入理解 float (原来浮动这么简单)
- 【不一样的CSS】深入理解 position (掌握定位就是这么 sao 气)
- 【不一样的CSS】深入理解 overflow (溢出要学会处理)
- 【不一样的CSS】深入理解 z-index (我们一起来叠罗汉)
- 【不一样的CSS】一文掌握 Flex 布局(长篇警告)
- 【不一样的CSS】一文掌握 Grid 布局(长篇警告)
干货
- 【不一样的CSS】实现居中布局的 8 种方式
- 【不一样的CSS】实现垂直布局的 8 种方式
- 【不一样的CSS】一文让你了解CSS中的各种单位
- 【不一样的CSS】实现水平垂直布局的 7 种方式
- 【不一样的CSS】实现两列布局的 6 种方式
- 【不一样的CSS】实现三列布局的 5 种方式
- 【不一样的CSS】实现等分布局的 4 种方式
- 【不一样的CSS】实现Sticky Footer布局的 4 种方式
- 【不一样的CSS】实现全屏布局的 3 种方式
- 面试官:前端布局了解嘛?我一下说了接近五十种布局方案,给面试官整不会了。
写在最后
文章以及源代码在 GitHub 仓库,点我进入:
该系列文章会一直维护,如果你有新的技巧或者想法,欢迎评论。