http://www.imooc.com/article/18451?block_id=tuijian_wz
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
position:
static: 没有定位,正常状态下。可以快速取消定位,让top、right、bottom、left 失效
relative: 相对于其在正常流中的位置偏移,原本占据的空间依然会保留
absolute: 相对于第一个position属性不为static的父类定位,会脱离正常文档流,不占据空间位置。
fixed: 定位原点相对于浏览器窗口,而且不能变。
inherit: 从父类继承position属性的值,但是任何版本的IE都不支持该属性
sticky: 该元素并不脱离文档流,仍然保留元素原本在文档流中的位置,这个属性的兼容性还不是很好,目前仍是一个试验性的属性,并不是W3C推荐的标准。
最后说一点,z-index属性是针对以上定位属性而出现的,它只在定位元素上有效。
display
display 属性规定元素应该生成的框的类型,文档内任何元素都是框,块框或行业框
(1) display:none和visiability: hidden 都可以隐藏div,前者不占据文档的空间,后者占据文档的位置。
(2) inline: 行内元素,以水平方式布局,垂直方向的margin和padding都是无效的,大小和内容一样,且无法设置宽高。
(3) block: 块元素,独占一行,可以使用margin来控制元素之间间距
(4) inline-block: 既具有block的宽度高度特性又具有inline的同行特性。