阅读 667

【不一样的CSS】搞定 CSS 布局-导航帖

【不一样的CSS】搞定 CSS 布局-导航帖

若彼岸繁华落尽,谁陪我看落日流年

写在前面

对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新,实现各种布局的方式已经多得数不胜数了。

本系列文章总结了 CSS 中的各种布局,以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。

前置技能

学习 CSS 布局不是学习的一个属性,也不是一个方法,而是众多属性、特性集一身的一种开发技巧。为了掌握这一开发技巧,我们前置需要学习一些关于布局的 CSS 属性以及一些概念和特性。该系列的目录如下:

  1. 【不一样的CSS】深入理解 float (原来浮动这么简单)
  2. 【不一样的CSS】深入理解 position (掌握定位就是这么 sao 气)
  3. 【不一样的CSS】深入理解 overflow (溢出要学会处理)
  4. 【不一样的CSS】深入理解 z-index (我们一起来叠罗汉)
  5. 【不一样的CSS】一文掌握 Flex 布局(长篇警告)
  6. 【不一样的CSS】一文掌握 Grid 布局(长篇警告)

干货

  1. 【不一样的CSS】实现居中布局的 8 种方式
  2. 【不一样的CSS】实现垂直布局的 8 种方式
  3. 【不一样的CSS】一文让你了解CSS中的各种单位
  4. 【不一样的CSS】实现水平垂直布局的 7 种方式
  5. 【不一样的CSS】实现两列布局的 6 种方式
  6. 【不一样的CSS】实现三列布局的 5 种方式
  7. 【不一样的CSS】实现等分布局的 4 种方式
  8. 【不一样的CSS】实现Sticky Footer布局的 4 种方式
  9. 【不一样的CSS】实现全屏布局的 3 种方式

写在最后

文章以及源代码在 GitHub 仓库,点我进入

该系列文章会一直维护,如果你有新的技巧或者想法,欢迎评论。

文章分类
阅读
文章标签