一、弹性盒子模型

1、布局模式

(1)Tabel布局：内容格式整齐
(2)div+css：盒子模型(灵活、比较难控制）
(3)display：flex(弹性盒子,也是使用div，让div的display属性为flex)

2、基本概念

(1)容器(flex container)：是一个块级标签(可以包含其他的页面元素)
(2)项目(flex item)：又称为子项(包含在容器的元素)
(3)排列方向(direction)：元素的布局方向

3、容器的属性

(1)flex-direction：定义容器中元素的布局方式(排列方式)，取值如下：

a、row(默认值)：排列的主轴方向为水平,从左端开始(从左往右)
b、row-reverse：排列的主轴方向为水平,从右端开始(从右往左)
c、column：主轴方向为垂直方向,起点是上沿(从上往下)
d、column-reverse：主轴方向为垂直方向,起点是下沿(从下往上)

eg：

flex-direction: row;           /*表示容器内容的布局方式为水平方向，从最左端开始，从左往右*/
flex-direction: row-reverse;   /*表示容器内容的布局方式为水平方向，从最右端开始，从右往左*/
flex-direction: column;        /*表示容器内容的布局方式为垂直方向，起点是上沿，从上往下*/
flex-direction: column-reverse;/*表示容器内容的布局方式为垂直方向，起点是下沿，从下往上*/

(2)flex-wrap：容器内的元素是否换行

a、nowrap：默认值,不换行

b、wrap：换行,第一行在上方

c、wrap-reverse：换行,第一行在下方

eg：

flex-wrap: wrap;          /*换行，第一行在上方*/
flex-wrap: wrap-reverse;  /*换行，第一行在下方*/

(3)flex-flow：是flex-direction和flex-wrap的简写,默认值为row nowrap
eg：

flex-flow: row wrap-reverse;/*合并上方的flex-direction: row;flex-wrap: wrap-reverse;属性*/

  (4)justify-content：子项的对齐方式

       a、flex-start：左对齐(默认) 。注意：表示容器的开始
           b、space-between：两端对齐,子项之间的宽度是相等的
           c、flex-end：右对齐(表示容器的结尾)
           d、center：居中
           e、flex-around：每个项目(子项)两侧的间距相等
eg：

justify-content: space-between;     /*子项目两端对齐*/
justify-content: flex-end;          /*子项目右对齐*/
justify-conten: center;             /*子项目居中*/
justify-content: space-around;      /*每个子项目两侧的间距相等*/

(5)align-items：单根轴线的对齐方式
(6)align-content：多根轴线的对齐方式

4、项目属性

(1)order：项目(子项)的排列顺序。

注：order取值正、负整数。取值越小，位置越前。子项目未设置，默认为0。

(2)flex-grow：项目的放大比例
eg：

 .one{
        width: 100px;
        order: 1;/* 其他子项目未设置，所以默认为0，数字越小，位置越前 */
        /* flex-grow: 1;其它默认为0，这个放大比例为1，宽度过大，则剩余部分全被one占据。项目的放大比例 */
    }

(3)flex-shrink：设置项目是否缩小

eg：

.five{
        width: 200px;
        flex-shrink: 0;/*当宽度过小，其它缩小，five不变。设置项目是否缩小*/
    }

(4)align-self：允许单个项目有与其他项目不一样的对齐方式。默认为auto，继承了容器的align-items属性值
(5)flex-basis：项目的初始宽度
(6)flex：flex-grow flex-shrink flex-basis

eg：flex: 1;等价于
flex-grow: 1; flex-shrink: 1; flex-basis: 0%;

二、页面中的多媒体嵌入

1、视频

<video src="视频文件名" controls></video>
视频的格式有：.mp4：mpeg-4(视频标准) .Web M .Ogg

2、音频

音频的格式有： .mp3 : mpeg-3(音频文件标准） .wav .ogg

三、CSS3中过渡效果

1、transition-property：指定过渡的属性，取值如下：

   none：没有属性取得过渡效果
       all : 所有属性都有过渡效果
       property：具体属性名获得过渡效果
eg：

transition-propeerty：background-color;/*指定背景颜色的过渡效果*/

    2、transition-duration：过渡效果所花费的时间，默认值为0

   秒：单位是s     毫秒：单位是ms

  3、transition-timing-function：过渡的速度曲线，取值如下：

   linear：以相同的速度从开始到结束。等同于cubic-bezier(0,0,1,1)
       ease：默认值。由慢到快,然后再到慢的效果
       ease-in：由慢开始，逐渐加快.即淡入效果
       ease-out：由慢结束.即淡出效果
       ease-in-out：淡入、淡出效果
       cubic-bezier(n,n,n,n)：由函数实现