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