之前因为客户端引入Facebook的YOGA库，以及微信小程序学习的原因，对于前端的布局有一定的了解。书读百遍其义自见，不经常使用的工具还是需要时不时学习，比如Flexbox和Position布局。
1. 流式布局
在未设置其他任何布局的情况下，网页默认采用流式布局方式。有几点需要注意一下:
① 行内标签可以嵌套在块级标签中，但是反之不可
块级标签不能嵌套到形内标签的原因是: 块级标签的新开一行的规则并不会改变，所以并没有任何效果
② 通过diplay可以修改为行内标签还是块级标签
③ order 调整item显示的顺序，可设置正数、负数和0（ item默认的order = 0）
如果要放置在前面，需设置一个较小的值!
2. Flexbox
flex-direction
弹性布局中对于内部items的方向设置值，主要是会影响主轴的方向。可取值: row 、row-reverse 、column、column-reverse.
① row: 默认值
② row-reverse
flex布局主轴默认为水平方向，设置row-reverse时并不是简单的左右偏移，而是变换了主轴的方向。
③column
④column-reverse
设置为column时，相当于把主轴和交叉轴进行了交换，整体布局以垂直方向显示。
Justify-content
决定了主轴方向上items对齐的方式，可取值: flex-start、flex-end、center、space-around、space-evenly和space-between。flex-start、flex-end和center很好理解，以上图中的start和end方向对齐。
①space-around
左右边距是中间间距的1/2（items之间的间距相等）
②space-evenly
间距和边距值相等
align-items
决定了交叉轴方向的对齐方式，可取值: flex-start、flex-end、center、baseline、stretch。
①stretch
拉伸到和容器相同的高度，但是前提是: 不能限制item的高度，不然不起作用！
3. Position
relative
相对布局，相对于元素在流式结构中的位置。可取值: 正数、负数和0.因为可以设置负数和正数，所以bottom: 20px == top: -20px
以图例进行说明:
关于left与top和单词本身的含义好像有点差异，为什么设置left反而往右边偏移的呢？设置top反而往下方偏移呢？原因就是网页CSS坐标方向:
absolute
绝对布局，相对于父视图的区域进行绝对布局。如果父视图中没有非static的元素那么就能在整个屏幕中大显身手了；如果存在则只能在父视图的区域内活动。设置元素位置值：left、top、right、bottom，需要注意和relative的差异:
这些位置值就等同于单词的含义，距离右边距的偏移量，可设置正数、负数和0.
iOS程序员的前端学习之路，开车了锁死不下车了！
