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