css基础回顾2
display属性
display:[block|inline|inline-block|none]
block: 块级元素，作用：将行级元素转换为块级元素，转换后独处一行（等价于在块级元素后敲了一个回车），width与height就会有效果。
inline: 行级元素、作用：将块级元素转换成行级元素（注意：转换后高度和宽度就失效了）
inline-block: 行内块元素，作用：具备块元素的属性，不会独处一行（不换行）。
none: 隐藏块元素或者行元素
float浮动
float：[left|right]
使用经验：
结合left | right来实现页面的布局|排版
float:left | right |none
注意会发生边框他先问题
解决边框塌陷的问题
1、 设置父容器边框的高度（height）(不推荐使用)
2、 设置父元素的结构伪类清除浮动(最常用)
.clearfix:after{
content: ””;
display: block;
clear: both;
}
3、 使用overflow:hidden
4、 在父容器中的子容器最后加一个空的div且清除两边浮动
<div style=”clear:both;”>div>
绝对定位
position: absolute
特性：
1、 脱离文档流，定位元素占据的位置会释放
2、 原点计算：如果该元素做了定位，那么就去找它做了定位的父元素（找最近的）作为原点基准，如果父元素都没做定位，则以浏览器(0,0)作为原点基准。
3、 对内联元素定位后，设置宽高属性就会有效果
应用场景：
一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景
相对定位
position:relative
1、 不脱离文档流，定位元素占据的位置不会被释放
2、 原点计算：以父级元素作为原点基准，若没有父级元素则以浏览器(0,0)为基准。
一般的应用：父相子绝
- 父元素为相对定位，子元素为绝对定位，文档元素不会受影响。
- 父元素提供相对定位后，子元素以父元素为基准来进行定位。
应用场景：
相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量
固定定位
position:fixed
1、 脱离了文档流
2、原点计算：以浏览器(0,0)作为原点基准，尽管父元素做了定位也不会影响它的原点
基准。
应用场景：
一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等
注意：使用定位后会激活如下5个属性
left | right | top | bottom | z-index
z-index:改变定位后的叠放顺序
取值范围：-1~9999
其他：
设置网页元素的透明度
opacity: 0~1;
filter: opacity(0.2) | contrast(0.2);
过渡transition
transition: 过渡的属性 过渡的时间 过渡的类型 延迟时间;
如：
transition：all 2s linear 2s;
transition：width 2s ease-in-out 2s,height .2s ease 3s;
变形transform
transform:
平移: translate(X轴,Y轴)
缩放: scale(2,-2) --- 正数：默认是1 负数：先翻转，再缩放相应倍数
倾斜（扭曲）: skew(45deg,45deg) 单位deg（度）
旋转: rotate(360deg)
缩放设置基准：
transform-origin：left |center| right | % | px top | middle | bottom | % | px;
动画animation
animation: 动画规则的名称 动画执行的时间 动画的类型 延迟时间 动画执行的次数 执行动画结束后是否停止在结束的位置 动画反向执行;
如：
animation: mymove(动画规则的名称) 4s linear 2s 2(执行次数|infinite) forwards(在动画结束位置停止) alternate(反向执行);
自定义规则如下2种方式：
方式1：
@Keyframes mymove{
from{}
to{}
}
方式2:
@Keyframes mymove{
10%{}
40%,60%{}
100%{}
}
animation-play-state: running;
animation-play-state：running | paused [ , running | paused ]*