弹性盒子模型

目录

一、弹性盒子模型

1、布局模式

2、基本概念

3、容器的属性

4、项目属性

二、页面中的多媒体嵌入

1、视频

2、音频

三、CSS3中过渡效果

一、弹性盒子模型

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：