浮动布局
.div{float:left|right}
让块级在父级限制下同行显示，一行显示不下自动换行
一行要固定个数需要父级宽度固定
子级不再撑开父级高度，如果需要，设置：after{content:'';display：block;clear:both}
固定定位
以页面为参考系固定；设置position：fixed
完全脱离文档流，显示优先于半脱离文档流的；父级要自己设置高度
left 与top优先
同是脱离文档流可设置z-index：必须为大于1 的整数
绝对定位
设置以父级为参考系默认父级上左position：absolute
父级默认relative
完全脱离文档流，显示优先于半脱离文档流的；父级要自己设置高度
left 与top优先
同是脱离文档流可设置z-index：必须为大于1 的整数
/*相对定位总结:
1.参考系为自身原有位置
2.一旦设置定位属性, top | bottom | left | right 四个方位(是定位属性盒子特有的)均可以参与布局
3.top = -bottom | left = -right (上下取上, 左右取左)
4.相对定位 不脱离文档流 => 不会影响自身布局, 自身布局采用的还是原来的布局
注: 相对定位定位方位只会改变显示图层, 不会改变盒子的原有位置, 原有位置不变就不会影响兄弟盒子
/*transition-duration: 3s;*/
/*延迟时间: 0*/
/*transition-delay: 1s;*/
/*过渡属性: all | 属性1, ..., 属性n | eg:height, background-color */
/*transition-property: all;*/
/*过渡曲线: ease*/
/*ease | ease-in | ease-out | ease-in-out | linear
cubic-bezier(0.83, 1.46, 0, -1.29)*/
/*transition-timing-function: cubic-bezier(0.83, 1.46, 0, -1.29);*/
/* 简写 */
/* 持续时间 延迟时间 过渡属性们 运动的贝塞尔曲线*/
/*transition: 2s 1s all cubic-bezier(0.83, 1.46, 0, -1.29);*/
transition: .3s linear;