【只差一個CSS】佈局：簡介

爲何要強調佈局？

​ 咱們爲頁面寫css，就是想美化這個頁面，讓它變得好看，而變得好看其實能夠分兩步來完成，第一步是整理，第二步是修飾。就像一間房間，房間裏有不少有用的東西，雜亂無章的擺放着，咱們如今怎麼美化這個房間呢？須要先把東西擺放整齊嘛，至於那些東西，可能自己看起來不太漂亮，可是咱們不能一上來就給他們包個書皮，貼兩朵花什麼的，這樣只會讓原本就亂糟糟的房間更亂，是否是？咱們要先把它們擺放到位，而後在這個基礎上，對不一樣的東西進行美化，這樣纔能有效的美化房間。一樣美化頁面，咱們須要先對頁面元素進行整理，這種整理就叫佈局(Layout)。

如何佈局？

​ 首先頁面有一種默認佈局，也就是什麼css也不寫，而後頁面對元素的排布狀況。咱們提到的佈局必定是對這種默認佈局進行調整，那怎麼調整呢？互聯網剛剛發展的時候，網頁不像如今那麼花哨，因此對css的要求沒有如今那麼高，因此一開始css並無提供專門的佈局方案，而是提供了一些基礎的功能，而後所謂佈局，就是你本身用這些基礎功能去定位元素，就像你要作一個糖人，一開始只是給你提供了鉤子錐子，後來纔有了專用的模具。

總結起來，傳統css佈局工具備：

• Float

• Position

• Table

現代css佈局工具備：

• Flexbox

• Grid

咱們能夠用這些工具來對頁面佈局。另外要講一點，Grid不只是一種css提供的佈局工具，更是一種佈局方式，咱們能夠用任何佈局工具來實現這種佈局方式，能夠用float作一個Grid框架，也能夠用Flexbox來作。

用哪種工具來佈局？

​ 同窗們要問啦，這麼多工具，我到底用哪種呢？這裏強烈推薦Flexbox。理由是Flexbox是一種現代的佈局工具，固然要比舊工具好用啦，惟一的不足是瀏覽器兼容性，可是咱們要作的是小程序，就沒有什麼瀏覽器兼容性的問題了，小程序能很好的支持Flexbox，還有什麼不用的理由呢？！

---

本教程免費開源，任何人均可以避免費學習、分享，甚至能夠進行修改。但須要註明做者及來源，而且不能用於商業。

本教程採用知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議進行許可。

想看系列其餘課程，請關注微信訂閱號：只差一個程序員

如在閱讀教程過程當中，有任何疑問，請加入答疑羣