CSS（二）

CSS定位（position）

绝对定位：absolute

脱离文档流；

默认参照物为浏览器视窗左上角

相对定位：relative

不脱离文档流；

默认参照物为此元素元位置

固定定位：fixed

脱离文档流；

默认参照物为浏览器视窗位置；

坐标属性（非定位元素不起作用）

top，left，right，bottom，z-index

设置z轴（z-index）

值为整数；

数值大则在前方显示。

设置参照物

父级为定位元素，子级的绝对定位元素会以父级为参照物。

返回顶部操作时只需要<a href="#"></a>即可

HTML5新特性

一、布局元素

二、媒体元素

三、画布（<canvas>)，例如刮刮乐。

四、SVG（定义矢量图）

五、表单新特性

HTML5布局元素

header：网页头部

nav：导航栏

aside：侧标栏

article：显示文章

section：布局的一部分

footer：网页页脚

媒体元素

一、audio 音频

二、video 视频

媒体元素属性

一、controls 显示控制面板

二、autoplay 视频自动播放

三、muted  静音

 圆角

border-radius：左上 右上 右下 左下

如果设置两个值，第一个值表示左上和右下，第二个值表示右上和左下。

阴影

box-shadow：10px 20px 30px blue；

参数分别表示：x轴偏移量，y轴偏移量，模糊半径，阴影颜色（不设置颜色为黑色）

形变

transform：

rotate（）；旋转 deg单位表示角度

scale（）；缩放

translate（）；位移

transition

transition-property   过度属性（例如transform）

transition-duration  过渡持续时间（例如1s）

transition-timing-function  过渡函数

transition-delay   过渡延迟时间

简写：

transition：属性 秒数 函数 延迟；

ease：开始和结束慢，中间块，默认值。

linear：匀速。

ease-in：开始慢。

ease-out：结束慢。

ease-in-out和ease类似，但比ease幅度大。

动画属性（animation） 

animation-name：规定需要绑定到选择器的keyframe名称。

animation-duration：规定完成动画所花费的时间，以秒或毫秒计。

animation-timing-function：规定动画的速度曲线。

animation-delay：规定在动画开始之前的延迟。

animation-iteration-count：规定动画应该播放的次数。

 @keyframes anim{

  0%{

      transform：translate（0px，0px）

}

100%{

transform：translate（900px，100px）

}

}

案例：

@keyframes anim{

         0%{

                transform：rotate（0deg）；

          }

         20%{

                 width：200px；

                 height“200px；

                  transform：rotate（360deg）；

            }

          40%{

                   background-color：yellow；

                  width：100px；

                   height：100px；

             }

           100%{

                    width：300px；

                 height：300px；

            }

  }

  .box{

         width：100px；

        height：100px；

        background-color：red；

        margin：100px auto；

        animation：anim 2s linear 1s infinite；

    }

keyframes

1. 按百分比指定动画
2. from...to...指定动画0% 100

CD旋转效果

停止动画效果

animation-play-state：paused；

 flex布局概述

flex布局又叫弹性布局（或者弹性盒子布局），

这是一种更先进的布局方式，可以让网页布局更简洁，更易于维护。

基本概念：

将元素设置为display：flex；元素会变为一个flex容器。

 容器内部的元素或者叫flex项目（flex-item）。

flex容器中的默认效果

1. flex项目在flex容器中延主轴排列。
2. flex项目高度适应flex容器高度（同行内元素）

main axis：主轴

cross axis：交叉轴

设置flex容器：

flex-direction：设置flex项目排列方向

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

justify-content：flex项目主轴排列方式

flex-start（默认值）：左对齐

flex-end：右对齐

center：居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-item：flex项目在交叉轴的排列方式

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

stretch（延伸）（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

flex项目：

flex-grow：属性定义项目的放大比例，默认值为0，空间充足，等比例补全。

flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

flex-basis：主轴排列为宽度，交叉轴排列为高度，设为px，默认值为auto。

flex：综合上面三个样式。

align-self：flex项目的对其方式(auto|flex-start|flex-end|center|baseline|stretch）