学习html5的第九天课堂笔记

display属性：规定元素应该生成的框的类型。
display取值：
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

inline-block 行内块元素。（CSS2.1 新增的值）

css3
选择器
布局
动画

1.定位布局
position
相对定位 relative
不脱离文档流；通过定位属性在移动时，相对于自身原来所在的位置。
定位属性：left/right/bottom/top left:50%;
绝对定位 absolute
脱离文档流；通过定位属性在移动时，相对于距离它最近的父定位元素，如果父定位元素不存在，则相对于浏览器视口。

固定定位 fixed
脱离文档流；通过定位属性在移动时，相对于浏览器视口。

2.百分比的参考元素
1）正常文档流中的元素
百分比相对于父元素

2）相对定位元素
百分比相对于父元素

3）绝对定位
百分比相对于父定位元素

3.伸缩盒布局
容器
display:flex;
flex-direction:row/column;
justify-content:(定义了子元素在主轴上的排列规则)
flex-start;
flex-end;
center;
space-around;
space-between;
align-items:(定义了子元素在交叉轴上的排列规则)
strech;
flex-start;
flex-end;
center;
flex-wrap:(定义了如果容器中无法容纳子元素的时候需不需要换行显示)
nowrap;
wrap:

子元素
     flex-basis  基本值
     flex-grow   分配准则、增长
     flex-shrink  收缩准则
     width/height
     flex                          

4.如何布局
定位布局
定位布局+flex

(打造自己的一套后台页面模板)

5.动画
1）animation
A.动画帧定义
@keyfarmes 动画名{
from{
width:200px;
}
to{
width:0;
}
}

B.动画配置
.left-nav{

    ①animation-name:动画名;

    ②animation-duration: 
    动画持续时间，即动画完成一个循环所需的时间长度。

    ③animation-iteration-count:
    动画重复的次数;（infinite---无限次）

    ④animation-deplay：
    动画延迟，即元素在加载成功后到动画运行前的时间。默认值为0s，即动画加载成功后立刻运行。

    ⑤animation-direction:
    动画运行完是否交替方向或者重置起点。
              normal;---默认值，正常播放。动画从0%执到100%。

              reverse;---动画执行顺序反转，从执行100%到0%

              alternate;---交替执行动画，第一次从0%执行到100%，第二次从100%执行到0%...与此同时，速度曲线也交替反转，反转时ease-in交替为ease-out。

    ⑥animation-fill-mode:
    填充模式，指定了CSS动画在执行前和执行后如何将样式应用到它的目标上。
       none; 默认值

       forwards:（目标将保留在执行期间所遇到的最后一个关键帧所设置的计算值）
       动画结束后元素应用动画最后一帧的样式；动画准备阶段元素在正常文档流

       backwards:（目标将保留在执行期间所遇到的第一个关键帧所设置的计算值）
       动画准备阶段元素应用动画第一帧的样式；动画结束后元素在正常文档流

       both:动画准备结点元素应用动画第一帧的样式；动画结束后元素应用动画第一帧的样式

    ⑦animation-timing-function:动画的速度曲线
        ease; 默认值
        ease-in; 先慢后快
        ease-out; 先快后慢
        ease-in-out; 先慢后快再慢
        linear; 线性增长
        steps; 

    ⑧animation-play-state:（暂停/恢复）
                 running;---运行状态
                 paused;---暂停状态   

}

2）transition（过渡动画）
语法：
div{
transition:property,duration,timing-function,delay;
}

 property:指定哪个或哪些CSS属性用于过渡。background/height/all/

 duration：指定过渡的时长。或者为所有属性指定一个值 或者指定多个值，为属性指定不同的时长。

 timing-function：曲线函数。

 delay：指定延迟，即属性开始变化时与过渡开始发生时之间的时长。

3）transform（变形）
①rotate 旋转
rotateX(angle)—绕X轴旋转
rotateY(angle)—绕Y轴旋转
rotateZ(angle)—绕Z轴旋转

  ②scale 缩放
     scale(sx) 缩放量的横坐标和纵坐标一致，实现等比例缩放。
     scale(sx,sy)

  ③skew 倾斜
      skew(ax,ay) 表示对元素的水平方向/垂直方向的剪切或者扭转。

  ④translate 移动
      translate(tx,ty) 在水平方向/垂直方向移动元素。

  ⑤perspective 视角

  ⑥perspective-origin 视角原点

  ⑦transform-style 变形方式

  ⑧transform-origin 变形原点:left/right/top/bottom/center