【只差一个CSS】布局：简介

为何要强调布局？

​ 咱们为页面写css，就是想美化这个页面，让它变得好看，而变得好看其实能够分两步来完成，第一步是整理，第二步是修饰。就像一间房间，房间里有不少有用的东西，杂乱无章的摆放着，咱们如今怎么美化这个房间呢？须要先把东西摆放整齐嘛，至于那些东西，可能自己看起来不太漂亮，可是咱们不能一上来就给他们包个书皮，贴两朵花什么的，这样只会让原本就乱糟糟的房间更乱，是否是？咱们要先把它们摆放到位，而后在这个基础上，对不一样的东西进行美化，这样才能有效的美化房间。一样美化页面，咱们须要先对页面元素进行整理，这种整理就叫布局(Layout)。

如何布局？

​ 首先页面有一种默认布局，也就是什么css也不写，而后页面对元素的排布状况。咱们提到的布局必定是对这种默认布局进行调整，那怎么调整呢？互联网刚刚发展的时候，网页不像如今那么花哨，因此对css的要求没有如今那么高，因此一开始css并无提供专门的布局方案，而是提供了一些基础的功能，而后所谓布局，就是你本身用这些基础功能去定位元素，就像你要作一个糖人，一开始只是给你提供了钩子锥子，后来才有了专用的模具。

总结起来，传统css布局工具备：

• Float

• Position

• Table

现代css布局工具备：

• Flexbox

• Grid

咱们能够用这些工具来对页面布局。另外要讲一点，Grid不只是一种css提供的布局工具，更是一种布局方式，咱们能够用任何布局工具来实现这种布局方式，能够用float作一个Grid框架，也能够用Flexbox来作。

用哪种工具来布局？

​ 同窗们要问啦，这么多工具，我到底用哪种呢？这里强烈推荐Flexbox。理由是Flexbox是一种现代的布局工具，固然要比旧工具好用啦，惟一的不足是浏览器兼容性，可是咱们要作的是小程序，就没有什么浏览器兼容性的问题了，小程序能很好的支持Flexbox，还有什么不用的理由呢？！

---

本教程免费开源，任何人均可以避免费学习、分享，甚至能够进行修改。但须要注明做者及来源，而且不能用于商业。

本教程采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

想看系列其余课程，请关注微信订阅号：只差一个程序员

如在阅读教程过程当中，有任何疑问，请加入答疑群