上一篇教程我们说过，小程序的技术范畴仍然是Web技术，而web视图展现的核心东西又是CSS（层叠样式表），当然这个东西也是随着时代在进步，前有CSS，现在有CSS3，当然CSS3是兼容老的CSS的，你也不要怕这个东西，尤其是新接触WEB开发的同学，不要怕。CSS的目的是向视图添油加醋，使视图漂亮、美观、现代化。学习CSS，核心要掌握的就是布局。
正如你所体验，页面的展示不外乎列表、tab多标签这种第一视觉感知。但是实际上CSS中页面的布局反应到每一个小视图上，都有自己的布局方式。这里我们只讲我们后面要用到的一种布局：flex-box布局，即现代化的弹性布局，所有浏览器都支持，所有移动设备都支持，并且高效简单，只要你理解了，一切就都OK了。组成一个完整视图的元素间也有自己的关系。整个页面的骨架组织为:
<html>
<head></head>
<body></body>
</html>
外层的html,可以省略。里面的head也可以省略，但是body不能省略，所有你看到的屏幕展示均是在body中存在、渲染。而head用于引入管理第三方库、样式表(CSS)等，它是为body服务的，你这样简单理解就行了。
head与body是兄弟关系或者是平行关系。head与body是html子节点，是父子关系。当然body里面也会有自己的子节点、后代节点等等。body反映到浏览器的可视区域，就是指除去浏览器的顶部工具框之外的区域，里面显示了网站的页面。如打开：https://developer.apple.com/，苹果开发者网站，红框所示即为body的区域。
这些你就简单的理解就行了。我们再来看看布局里面的一个重要的属性：position！我们只介绍他的三个属性值，你了解这三个就够了。
fixed、absolute、relative。
fixed：绝对定位，即相对于body区域的定位，指此dom离body左上角的x偏移值和y偏移值。body不动，它则不会动，就永远显示在相对于body左上角的某个地方(X,Y)，无论你是不是在上下滚动某个区域，它都不会动。
absolute:相对于父视图的绝对定位。比如以下：当p的定位使用此值时，是指p相对于div的(X,Y)偏移。当然div得有自己的定位属性。如果没有定位属性，则p继续向上寻找具有定位属性的爷爷辈、爷爷的爸爸等。。就这样一直找，直到body属性。
<div>
<p>
</p>
</div>
relative:相对定位。即相对于自己的定位，这个理解比较绕。在web中，是按照你写的自上而下的顺序进行渲染的，每一个dom都有自己的位置。如下：按照顺序渲染，假设div被渲染到(0,0)位置，大小100*50。p被渲染到(0,50)位置，大小100*100，那么P的文档流位置就是(0,50)，当你设置p的定位属性为relative,left=100时，p就会偏移本身的坐标向右挪动100进行显示，即它会被渲染到(100,50)的位置。这就是相对于自己位置的相对定位。而这个自身的位置术语就叫做流位置。如果还是不能理解，你就认为它是一个预设的初始位置，渲染的时候，根据预设的初始位置再加上left、top等属性重新改动其位置。
<div></div>
<p></p>
而在小程序开发实战中，最常使用的是fixed、及relative定位，后面的教程中我也会尽量避开使用absolute定位。在小程序中，fixed就是相对于屏幕左上角的定位，这样记住就好了。
现在我们来说说布局属性：弹性盒子(flex-box)布局。此种布局将子元素的布局方式控制为主轴和辅轴，即控制主轴应该怎么渲染，辅轴应该怎么渲染。
display:flex 用于声明本dom的布局使用弹性盒子布局
1、如果主轴为X轴(flex-direction=row)，即水平方向，你要将A、B、C、D显示在页面上，则主轴的布局方式有（justify-content）：
a.左对齐(flex-start)，从左至右渲染显示A、B、C、D,整个行是左对齐的。辅轴的对齐方式(align-items)有上对齐(flex-start)、垂直居中(center)、下对齐(flex-end)。如下：
辅轴的对齐方式图例：
打开在线学习网站：https://www.w3school.com.cn/tiy/t.asp?f=csse_outline-color，清空左侧的代码，手动按照以下截图输入后，点击左侧上方的运行按钮，分别设置align-items为flex-start、center、flex-end仔细观察体会。
b.右对齐(flex-end)，仍然是从左至右A、B、C、D渲染，但是整个行是向右对齐的。辅轴的对齐方式(align-items)有上对齐(flex-start)、垂直居中(center)、下对齐(flex-end)。如下：
辅轴的对齐方式图例：
打开在线学习网站：https://www.w3school.com.cn/tiy/t.asp?f=csse_outline-color，清空左侧的代码，手动按照以下截图输入后，点击左侧上方的运行按钮，分别设置align-items为flex-start、center、flex-end仔细观察体会。
c.中间(center)，从左至右A、B、C、D渲染，但是整个行是居中对齐的。辅轴的对齐方式(align-items)有上对齐(flex-start)、垂直居中(center)、下对齐(flex-end)。如下：
辅轴的对齐方式图例：
打开在线学习网站：https://www.w3school.com.cn/tiy/t.asp?f=csse_outline-color，清空左侧的代码，手动按照以下截图输入后，点击左侧上方的运行按钮，分别设置align-items为flex-start、center、flex-end仔细观察体会。
2、如果主轴为Y轴(flex-direction=column)，即垂直方向，你要将A、B、C、D显示在页面上，则主轴的布局方式有（justify-content）：
a.上对齐(flex-start)，从上至下渲染显示A、B、C、D,，整个列是向上对齐的。辅轴的对齐方式(align-items)有左对齐(flex-start)、水平居中(center)、右对齐(flex-end)。如下：
辅轴的对齐方式图例：
打开在线学习网站：https://www.w3school.com.cn/tiy/t.asp?f=csse_outline-color，清空左侧的代码，手动按照以下截图输入后，点击左侧上方的运行按钮，分别设置align-items为flex-start、center、flex-end仔细观察体会。
b.下对齐(flex-end)，仍然是从上至下A、B、C、D渲染，但是整个列是向下对齐的。辅轴的对齐方式(align-items)有左对齐(flex-start)、水平居中(center)、右对齐(flex-end)。如下：
辅轴的对齐方式图例同学们自己思考，这里不再图例。
打开在线学习网站：https://www.w3school.com.cn/tiy/t.asp?f=csse_outline-color，清空左侧的代码，手动按照以下截图输入后，点击左侧上方的运行按钮，分别设置align-items为flex-start、center、flex-end仔细观察体会。
c.中间(center)，从上至下A、B、C、D渲染，但是整个列是垂直居中的。辅轴的对齐方式(align-items)有左对齐(flex-start)、水平居中(center)、右对齐(flex-end)。如下：
辅轴的对齐方式图例同学们自己思考，这里不再图例。
打开在线学习网站：https://www.w3school.com.cn/tiy/t.asp?f=csse_outline-color，清空左侧的代码，手动按照以下截图输入后，点击左侧上方的运行按钮，分别设置align-items为flex-start、center、flex-end仔细观察体会。
当然justify-content还有其他几个值，我们这里暂且不讲，后面实战中遇到了，我们再一一串讲，解释。
本节课程就到这里，同学们，好好整理了解几下。不要急着进入下一节去学习。把东西先吃透了解清楚，总会有很多好处
