浮动布局，固定定位；绝对定位；相对定位

浮动布局

.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;