上一篇教程我們說(shuō)過(guò)，小程序的技術(shù)范疇仍然是Web技術(shù)，而web視圖展現(xiàn)的核心東西又是CSS（層疊樣式表），當(dāng)然這個(gè)東西也是隨著時(shí)代在進(jìn)步，前有CSS，現(xiàn)在有CSS3，當(dāng)然CSS3是兼容老的CSS的，你也不要怕這個(gè)東西，尤其是新接觸WEB開(kāi)發(fā)的同學(xué)，不要怕。CSS的目的是向視圖添油加醋，使視圖漂亮、美觀、現(xiàn)代化。學(xué)習(xí)CSS，核心要掌握的就是布局。
正如你所體驗(yàn)，頁(yè)面的展示不外乎列表、tab多標(biāo)簽這種第一視覺(jué)感知。但是實(shí)際上CSS中頁(yè)面的布局反應(yīng)到每一個(gè)小視圖上，都有自己的布局方式。這里我們只講我們后面要用到的一種布局：flex-box布局，即現(xiàn)代化的彈性布局，所有瀏覽器都支持，所有移動(dòng)設(shè)備都支持，并且高效簡(jiǎn)單，只要你理解了，一切就都OK了。組成一個(gè)完整視圖的元素間也有自己的關(guān)系。整個(gè)頁(yè)面的骨架組織為:
<html>
<head></head>
<body></body>
</html>
外層的html,可以省略。里面的head也可以省略，但是body不能省略，所有你看到的屏幕展示均是在body中存在、渲染。而head用于引入管理第三方庫(kù)、樣式表(CSS)等，它是為body服務(wù)的，你這樣簡(jiǎn)單理解就行了。
head與body是兄弟關(guān)系或者是平行關(guān)系。head與body是html子節(jié)點(diǎn)，是父子關(guān)系。當(dāng)然body里面也會(huì)有自己的子節(jié)點(diǎn)、后代節(jié)點(diǎn)等等。body反映到瀏覽器的可視區(qū)域，就是指除去瀏覽器的頂部工具框之外的區(qū)域，里面顯示了網(wǎng)站的頁(yè)面。如打開(kāi)：https://developer.apple.com/，蘋(píng)果開(kāi)發(fā)者網(wǎng)站，紅框所示即為body的區(qū)域。
這些你就簡(jiǎn)單的理解就行了。我們?cè)賮?lái)看看布局里面的一個(gè)重要的屬性：position！我們只介紹他的三個(gè)屬性值，你了解這三個(gè)就夠了。
fixed、absolute、relative。
fixed：絕對(duì)定位，即相對(duì)于body區(qū)域的定位，指此dom離body左上角的x偏移值和y偏移值。body不動(dòng)，它則不會(huì)動(dòng)，就永遠(yuǎn)顯示在相對(duì)于body左上角的某個(gè)地方(X,Y)，無(wú)論你是不是在上下滾動(dòng)某個(gè)區(qū)域，它都不會(huì)動(dòng)。
absolute:相對(duì)于父視圖的絕對(duì)定位。比如以下：當(dāng)p的定位使用此值時(shí)，是指p相對(duì)于div的(X,Y)偏移。當(dāng)然div得有自己的定位屬性。如果沒(méi)有定位屬性，則p繼續(xù)向上尋找具有定位屬性的爺爺輩、爺爺?shù)陌职值?。。就這樣一直找，直到body屬性。
relative:相對(duì)定位。即相對(duì)于自己的定位，這個(gè)理解比較繞。在web中，是按照你寫(xiě)的自上而下的順序進(jìn)行渲染的，每一個(gè)dom都有自己的位置。如下：按照順序渲染，假設(shè)div被渲染到(0,0)位置，大小100*50。p被渲染到(0,50)位置，大小100*100，那么P的文檔流位置就是(0,50)，當(dāng)你設(shè)置p的定位屬性為relative,left=100時(shí)，p就會(huì)偏移本身的坐標(biāo)向右挪動(dòng)100進(jìn)行顯示，即它會(huì)被渲染到(100,50)的位置。這就是相對(duì)于自己位置的相對(duì)定位。而這個(gè)自身的位置術(shù)語(yǔ)就叫做流位置。如果還是不能理解，你就認(rèn)為它是一個(gè)預(yù)設(shè)的初始位置，渲染的時(shí)候，根據(jù)預(yù)設(shè)的初始位置再加上left、top等屬性重新改動(dòng)其位置。
而在小程序開(kāi)發(fā)實(shí)戰(zhàn)中，最常使用的是fixed、及relative定位，后面的教程中我也會(huì)盡量避開(kāi)使用absolute定位。在小程序中，fixed就是相對(duì)于屏幕左上角的定位，這樣記住就好了。
現(xiàn)在我們來(lái)說(shuō)說(shuō)布局屬性：彈性盒子(flex-box)布局。此種布局將子元素的布局方式控制為主軸和輔軸，即控制主軸應(yīng)該怎么渲染，輔軸應(yīng)該怎么渲染。
display:flex 用于聲明本dom的布局使用彈性盒子布局
1、如果主軸為X軸(flex-direction=row)，即水平方向，你要將A、B、C、D顯示在頁(yè)面上，則主軸的布局方式有（justify-content）：
a.左對(duì)齊(flex-start)，從左至右渲染顯示A、B、C、D,整個(gè)行是左對(duì)齊的。輔軸的對(duì)齊方式(align-items)有上對(duì)齊(flex-start)、垂直居中(center)、下對(duì)齊(flex-end)。如下：
輔軸的對(duì)齊方式圖例：
打開(kāi)在線學(xué)習(xí)網(wǎng)站：https://www.w3school.com.cn/tiy/t.asp?f=csse_outline-color，清空左側(cè)的代碼，手動(dòng)按照以下截圖輸入后，點(diǎn)擊左側(cè)上方的運(yùn)行按鈕，分別設(shè)置align-items為flex-start、center、flex-end仔細(xì)觀察體會(huì)。
b.右對(duì)齊(flex-end)，仍然是從左至右A、B、C、D渲染，但是整個(gè)行是向右對(duì)齊的。輔軸的對(duì)齊方式(align-items)有上對(duì)齊(flex-start)、垂直居中(center)、下對(duì)齊(flex-end)。如下：
輔軸的對(duì)齊方式圖例：
打開(kāi)在線學(xué)習(xí)網(wǎng)站：https://www.w3school.com.cn/tiy/t.asp?f=csse_outline-color，清空左側(cè)的代碼，手動(dòng)按照以下截圖輸入后，點(diǎn)擊左側(cè)上方的運(yùn)行按鈕，分別設(shè)置align-items為flex-start、center、flex-end仔細(xì)觀察體會(huì)。
c.中間(center)，從左至右A、B、C、D渲染，但是整個(gè)行是居中對(duì)齊的。輔軸的對(duì)齊方式(align-items)有上對(duì)齊(flex-start)、垂直居中(center)、下對(duì)齊(flex-end)。如下：
輔軸的對(duì)齊方式圖例：
打開(kāi)在線學(xué)習(xí)網(wǎng)站：https://www.w3school.com.cn/tiy/t.asp?f=csse_outline-color，清空左側(cè)的代碼，手動(dòng)按照以下截圖輸入后，點(diǎn)擊左側(cè)上方的運(yùn)行按鈕，分別設(shè)置align-items為flex-start、center、flex-end仔細(xì)觀察體會(huì)。
2、如果主軸為Y軸(flex-direction=column)，即垂直方向，你要將A、B、C、D顯示在頁(yè)面上，則主軸的布局方式有（justify-content）：
a.上對(duì)齊(flex-start)，從上至下渲染顯示A、B、C、D,，整個(gè)列是向上對(duì)齊的。輔軸的對(duì)齊方式(align-items)有左對(duì)齊(flex-start)、水平居中(center)、右對(duì)齊(flex-end)。如下：
輔軸的對(duì)齊方式圖例：
打開(kāi)在線學(xué)習(xí)網(wǎng)站：https://www.w3school.com.cn/tiy/t.asp?f=csse_outline-color，清空左側(cè)的代碼，手動(dòng)按照以下截圖輸入后，點(diǎn)擊左側(cè)上方的運(yùn)行按鈕，分別設(shè)置align-items為flex-start、center、flex-end仔細(xì)觀察體會(huì)。
b.下對(duì)齊(flex-end)，仍然是從上至下A、B、C、D渲染，但是整個(gè)列是向下對(duì)齊的。輔軸的對(duì)齊方式(align-items)有左對(duì)齊(flex-start)、水平居中(center)、右對(duì)齊(flex-end)。如下：
輔軸的對(duì)齊方式圖例同學(xué)們自己思考，這里不再圖例。
打開(kāi)在線學(xué)習(xí)網(wǎng)站：https://www.w3school.com.cn/tiy/t.asp?f=csse_outline-color，清空左側(cè)的代碼，手動(dòng)按照以下截圖輸入后，點(diǎn)擊左側(cè)上方的運(yùn)行按鈕，分別設(shè)置align-items為flex-start、center、flex-end仔細(xì)觀察體會(huì)。
c.中間(center)，從上至下A、B、C、D渲染，但是整個(gè)列是垂直居中的。輔軸的對(duì)齊方式(align-items)有左對(duì)齊(flex-start)、水平居中(center)、右對(duì)齊(flex-end)。如下：
輔軸的對(duì)齊方式圖例同學(xué)們自己思考，這里不再圖例。
打開(kāi)在線學(xué)習(xí)網(wǎng)站：https://www.w3school.com.cn/tiy/t.asp?f=csse_outline-color，清空左側(cè)的代碼，手動(dòng)按照以下截圖輸入后，點(diǎn)擊左側(cè)上方的運(yùn)行按鈕，分別設(shè)置align-items為flex-start、center、flex-end仔細(xì)觀察體會(huì)。
當(dāng)然justify-content還有其他幾個(gè)值，我們這里暫且不講，后面實(shí)戰(zhàn)中遇到了，我們?cè)僖灰淮v，解釋。
本節(jié)課程就到這里，同學(xué)們，好好整理了解幾下。不要急著進(jìn)入下一節(jié)去學(xué)習(xí)。把東西先吃透了解清楚，總會(huì)有很多好處
