图片多媒体

 

1. 页面制作过程回顾

1.1得到设计图

1.2划分页面区域（HTML：结构元素，CSS：块盒）

1.3填充区域中的内容（HTML：文字、图片和多媒体元素等，CSS：行盒）

2. 图片和多媒体

2.1视频：video元素（src属性：视频路径，controls属性：【布尔属性】指定后，会显示播放控件：XXX="XXX" 这种写法的属性叫做布尔属性，布尔属性只有两种状态，指定和未指定，布尔属性可以只书写属性名即可。autoplay：【布尔属性】指定后，视频在页面上显示后会立即进入播放状态.）

2.2音频：audio元素（src属性：音频路径，controls属性：【布尔属性】指定后，会显示播放控件，autoplay：【布尔属性】指定后，音频在页面上显示后会立即进入播放状态，用figure和figcaption来表示一个图片和多媒体单元）

2.3可替换元素和非可替换元素

非可替换元素：元素的显示内容，由元素内容决定，绝大部分元素都是非可替换元素。

3. 嵌入式元素

3.1概述嵌入页面，使用iframe元素可以在页面中嵌入其他页面，原理示例，代码示例。

3.2嵌入flash程序：使用object或embed元素，可以在页面中嵌入外部资源，

通常嵌入的是flash程序，示例

4. 行盒

4.1行盒概述：display属性为inline（默认值）的元素，大部分文字元素：span、abbr、em、i、strong、b，图片和多媒体：img、video、audio，页面的具体内容（文字、图片、多媒体）都会生成行盒，页面区域中包含内容，所以块盒包含行盒块盒内放置行盒，行盒内不要放置块盒。

4.2行盒的显著特征：行盒可被折断，因为内容可被折断换行，同一个包含块中，连续的多个行盒水平依次排列，空白折叠的规则仅适用于行盒内部和行盒之间，行盒与行盒之间的距离可使用水平方向上的margin和padding进行设置。

4.3行盒的尺寸：行盒-可替换元素：图片和多媒体,与块盒完全一致,对于图片和视频，仅设置宽高中的一个时，另一个会自动按比例适应,对于图片和视频，如果同时设置宽高，可通过object-fit属性设置适应方式,行盒-非可替换元素：文字类元素,width和height无效,垂直方向上的margin、border、padding不占据布局空间,可使用line-height设置一行的文字高度.

4.4行盒的位置:行盒在包含块中，避开浮动和常规流盒子,包含行盒的块盒，可使用text-align调整行盒在它内部的对齐方式,行盒之间的对齐方式，可使用vertical-align调整【了解】,每一个行盒以及包含行盒的元素，会在其内部创建多根参考线,行盒默认使用基线对齐【vertical-align:baseline】：将自己的基线与包含块的基线对齐,可调整vertical-align属性值，选择其他对齐方式,通常情况下可使用vertical-align调整图片和其前后文字的对齐方式,可使用vertical-align消除行盒与外部块盒底部的空隙。

5.行块盒

5.1什么是行块盒：display属性值为inline-block的元素生成的盒子，行块盒在某些方面表现的像行盒，某些方面表现的像块盒。

5.2与行盒的区别：行块盒内部可以放块盒，行盒不行，行块盒的所有盒模型尺寸都是有效的，而行盒不是，行盒垂直方向上的margin、border、padding的尺寸不占据空间，行盒不能设置宽高。

5.3行块盒通常用于宽度自动的水平居中