弹性盒子小结

目录

一、弹性盒子模型

1.布局模式

2.基本概念

3.容器属性

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

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

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

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

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

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

4、项目属性

二、页面中的多媒体嵌入

1.视频

2.音频

三、CSS3中过渡效果

1.transition-property：指定过渡的属性

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

3.transition-timing-function：过渡的速度曲线

四、CSS的变形：transform

1.平移：本质是重新定义元素的坐标

transform: translate(x-value,y-value)；

2.旋转

transform:rotate(angle)；

3.缩放

transform:scale(x-axis,y-axis)；

4.倾斜

transform:skew(x-angle,y-angle);

5.中心点

transform-origin: x-axis y-axis z-axis;

五、CSS的动画：通过animation实现

1.创建动画：@keyframes

keyframes-selector

2.应用动画：animation

六、CSS3的滤镜(Filters)

1.模糊效果(高斯模糊)

blur(value);

2.图像的亮度

brightness(value);

3.调整图像对比度

contrast(value);

4.图像阴影

drop-shadow(x,y,r,c);

5.将图像转为灰度

grayscale(value);

6.反转效果

invert(value);

7.图像透明度

opacity(value);

8.棕褐色效果

sepia(value);

9.饱和度

saturate(value);

七、CSS3的精灵技术

八、CSS3属性书写顺序

1.布局定位属性

2.自身属性

3.文本属性

4.其他属性

---

一、弹性盒子模型

1.布局模式

(1)Tabel布局：内容格式整齐

(2)div+css：盒子模型(灵活、比较难控制)

(3)display:flex(弹性盒子,也是使用div，让div的display属性为flex)

2.基本概念

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

3.容器属性

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

取值如下：

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

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

nowrap	默认值,不换行
wrap	换行,第一行在上方
wrap-reverse	换行,第一行在下方

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

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

flex-start	左对齐(默认) 。（表示容器的开始）
space-between	两端对齐,子项之间的宽度是相等的
flex-end	右对齐(表示容器的结尾)
center	居中
flex-around	每个项目(子项)两侧的间距相等

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

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

4、项目属性

order	项目(子项)的排序顺序
flex-grow	项目的放大比例
flex-shrink	设置项目是否缩小
align-self	允许单个项目有与其他项目不一样的对齐方式。默认为auto，继承了容器的align-items属性值
flex-basis	项目的初始宽度

(6)flex：flex-grow flex-shrink flex-basis

例如：flex: 1;等价于

 flex-grow: 1;

flex-shrink: 1;

flex-basis: 0%;

二、页面中的多媒体嵌入

1.视频

<video src="视频文件名" controls></video>

.mp4：mpeg-4(视频标准)

.WebM

.Ogg

2.音频

<audio src="音频文件名" controls></audio>

.mp3 : mpeg-3(音频文件标准)

.wav 

.ogg

三、CSS3中过渡效果

从一个样式变化到另一个样式

1.transition-property：指定过渡的属性

取值如下：

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

2