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