資訊專欄INFORMATION COLUMN
摘要：同樣美化頁面，我們需要先對頁面元素進行整理，這種整理就叫布局。如何布局首先頁面有一種默認(rèn)布局，也就是什么也不寫，然后頁面對元素的排布情況。用哪一種工具來布局同學(xué)們要問啦，這么多工具，我到底用哪一種呢這里強烈推薦。
為什么要強調(diào)布局？
? 我們?yōu)轫撁鎸慶ss，就是想美化這個頁面，讓它變得好看，而變得好看其實可以分兩步來完成，第一步是整理，第二步是修飾。就像一間房間，房間里有很多有用的東西，雜亂無章的擺放著，我們現(xiàn)在怎么美化這個房間呢？需要先把東西擺放整齊嘛，至于那些東西，可能本身看起來不太漂亮，但是我們不能一上來就給他們包個書皮，貼兩朵花什么的，這樣只會讓本來就亂糟糟的房間更亂，是不是？我們要先把它們擺放到位，然后在這個基礎(chǔ)上，對不同的東西進行美化，這樣才能有效的美化房間。同樣美化頁面，我們需要先對頁面元素進行整理，這種整理就叫布局(Layout)。
如何布局？? 首先頁面有一種默認(rèn)布局，也就是什么css也不寫，然后頁面對元素的排布情況。我們提到的布局一定是對這種默認(rèn)布局進行調(diào)整，那怎么調(diào)整呢？互聯(lián)網(wǎng)剛剛發(fā)展的時候，網(wǎng)頁不像現(xiàn)在那么花哨，所以對css的要求沒有現(xiàn)在那么高，所以一開始css并沒有提供專門的布局方案，而是提供了一些基礎(chǔ)的功能，然后所謂布局，就是你自己用這些基礎(chǔ)功能去定位元素，就像你要做一個糖人，一開始只是給你提供了鉤子錐子，后來才有了專用的模具。
總結(jié)起來，傳統(tǒng)css布局工具有：
Float
Position
Table
現(xiàn)代css布局工具有：
Flexbox
Grid
我們可以用這些工具來對頁面布局。另外要講一點，Grid不僅是一種css提供的布局工具，更是一種布局方式，我們可以用任何布局工具來實現(xiàn)這種布局方式，可以用float做一個Grid框架，也可以用Flexbox來做。
用哪一種工具來布局？? 同學(xué)們要問啦，這么多工具，我到底用哪一種呢？這里強烈推薦Flexbox。理由是Flexbox是一種現(xiàn)代的布局工具，當(dāng)然要比舊工具好用啦，唯一的不足是瀏覽器兼容性，但是我們要做的是小程序，就沒有什么瀏覽器兼容性的問題了，小程序能很好的支持Flexbox，還有什么不用的理由呢？！
本教程免費開源，任何人都可以免費學(xué)習(xí)、分享，甚至可以進行修改。但需要注明作者及來源，并且不能用于商業(yè)。
本教程采用知識共享署名-非商業(yè)性使用-禁止演繹 4.0 國際許可協(xié)議進行許可。
想看系列其他課程，請關(guān)注微信訂閱號：只差一個程序員
如在閱讀教程過程中，有任何疑問，請加入答疑群
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87394.html
摘要：同樣美化頁面，我們需要先對頁面元素進行整理，這種整理就叫布局。如何布局首先頁面有一種默認(rèn)布局，也就是什么也不寫，然后頁面對元素的排布情況。用哪一種工具來布局同學(xué)們要問啦，這么多工具，我到底用哪一種呢這里強烈推薦。 為什么要強調(diào)布局？ ? 我們?yōu)轫撁鎸慶ss，就是想美化這個頁面，讓它變得好看，而變得好看其實可以分兩步來完成，第一步是整理，第二步是修飾。就像一間房間，房間里有很多有用...
摘要：為什么要學(xué)小程序小程序類似于一種輕型的手機，可實現(xiàn)大部分的功能。小程序是微信團隊推出的，擁有微信的原生支持，可共享微信龐大的用戶群等等資源。小程序開發(fā)基于技術(shù)，相對于和的傳統(tǒng)，開發(fā)成本低。 為什么要學(xué)小程序？ 小程序類似于一種輕型的手機app，可實現(xiàn)大部分app的功能。 小程序是微信團隊推出的，擁有微信的原生支持，可共享微信龐大的用戶群等等資源。 小程序開發(fā)基于web技術(shù)，相對于an...
摘要：為什么要學(xué)小程序小程序類似于一種輕型的手機，可實現(xiàn)大部分的功能。小程序是微信團隊推出的，擁有微信的原生支持，可共享微信龐大的用戶群等等資源。小程序開發(fā)基于技術(shù)，相對于和的傳統(tǒng)，開發(fā)成本低。 為什么要學(xué)小程序？ 小程序類似于一種輕型的手機app，可實現(xiàn)大部分app的功能。 小程序是微信團隊推出的，擁有微信的原生支持，可共享微信龐大的用戶群等等資源。 小程序開發(fā)基于web技術(shù)，相對于an...
摘要：為什么要學(xué)小程序小程序類似于一種輕型的手機，可實現(xiàn)大部分的功能。小程序是微信團隊推出的，擁有微信的原生支持，可共享微信龐大的用戶群等等資源。小程序開發(fā)基于技術(shù)，相對于和的傳統(tǒng)，開發(fā)成本低。 為什么要學(xué)小程序？ 小程序類似于一種輕型的手機app，可實現(xiàn)大部分app的功能。 小程序是微信團隊推出的，擁有微信的原生支持，可共享微信龐大的用戶群等等資源。 小程序開發(fā)基于web技術(shù)，相對于an...
閱讀 3726·2021-10-12 10:11
閱讀 1992·2019-08-30 15:53
閱讀 1601·2019-08-30 13:15
閱讀 2314·2019-08-30 11:25
閱讀 1811·2019-08-29 11:24
閱讀 1659·2019-08-26 13:53
閱讀 3535·2019-08-26 13:22
閱讀 1779·2019-08-26 10:24
