布局

一.浮动布局

浮动布局：让块级（block）标签在父级的宽度限制下同行显示，一行显示不下，自动换行。

注：要到达一行显示个数固定，一定要固定父级的宽度

/*
语法： 
    子级 {
        float: left | right;
}

出现的问题：子级不再撑开父级高度 （不完全脱离文档流）
脱离文档流：层次结构会上移，覆盖有位置重叠且没脱离文档流的标签
不完全：浮动布局后，可以重新让子级撑开父级高度

清浮动：让不完全脱离文档流的子级重新撑开父级的高度，这种做法就叫清浮动

语法：

父级:after {
      content: '' ;
      display: block;
      clear: both;
}
*/

二.定位布局

1.固定定位

/*
盒子相对于屏幕完成位置布局，不会随着屏幕内容的滚动而滚动（相对于屏幕窗口是静止的），且和页面内容发生重叠时，该布局下的内容显示层次更高（覆盖其他内容）

语法：
position:fixed;

总结：
1.参考系为页面窗口
2.一旦设置定位属性，top|bottom|left|right 四个方位（是定位属性盒子特有的）均可以参与布局
3.上下同时出现取上，左右同时出现取左
4.固定定位会完全脱离文档流（永远不会撑开父级高度，布局中父级一定需要自己设置高度）
5.完全脱离文档流的盒子显示层次高于不脱离文档流的盒子，两个完全脱离文档流盒子的显示层次可以通过z-index属性来设置（脱离文档流盒子特有的），来改变显示层次的顺序（值大者覆盖值小者）

2.绝对定位

/*
兄弟标签之间不互相影响，都参照父级的显示区域来完成布局

语法：
position:absolute;

总结：
1.参考系为最近的定位父级（父级一般采用相对定位relative来辅助子级绝对定位）
2.一旦设置属性，top|bottom|left|right 四个方位（是定位属性盒子特有的）均可以参与布局
3.上下同时出现取上，左右同时出现取左
4.绝对定位会完全脱离文档流（永远不会撑开父级宽度，布局中父级一定需要自己设置高度）
5.完全脱离文档流的盒子显示层次高于不脱离文档流的盒子，两个完全脱离文档流盒子的显示层次可以通过设置z-index属性（脱离文档流盒子特有的）来改变显示层次的顺序（值大者覆盖值小者）
*/

3.相对定位

/*
它的核心用处：父相子绝

语法：position:relative;

总结：
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;