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)为基准。

一般的应用：父相子绝

1. 父元素为相对定位，子元素为绝对定位，文档元素不会受影响。
2. 父元素提供相对定位后，子元素以父元素为基准来进行定位。

应用场景：

相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量

固定定位

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 ]*