在区域中填充内容
页面制作过程回顾
- 得到设计图
- 划分页面区域:
HTML：结构元素
CSS：块盒
- 填充区域中的内容
HTML：文字、图片和多媒体元素等
CSS：行盒
图片和多媒体
图片：img元素：
src属性：图片路径
alt属性：图片无法显示时使用的替代文本
title属性：鼠标悬停时显示的文字
视频：video元素
src属性：视频路径
controls属性：【布尔属性】指定后，会显示播放控件
autoplay：【布尔属性】指定后，视频在页面上显示后会立即进入播放状态
音频：audio元素
src属性：音频路径
controls属性：【布尔属性】指定后，会显示播放控件
autoplay：【布尔属性】指定后，音频在页面上显示后会立即进入播放状态
用figure和figcaption来表示一个图片和多媒体单元
可替换元素和非可替换元素
可替换元素：元素的显示内容，由其属性决定，比如img、video、audio
非可替换元素：元素的显示内容，由元素内容决定，绝大部分元素都是非可替换元素
嵌入式元素
嵌入页面
使用iframe元素可以在页面中嵌入其他页面
嵌入flash程序
使用object或embed元素，可以在页面中嵌入外部资源，通常嵌入的是flash程序
行盒
行盒概述
什么是行盒
display属性为inline（默认值）的元素
有哪些常见的行盒
大部分文字元素：span、abbr、em、i、strong、b
图片和多媒体：img、video、audio
理解行盒的含义
页面的具体内容（文字、图片、多媒体）都会生成行盒
文字：必须放置到行盒内，否则会生成匿名行盒
图片和多媒体：默认会生成行盒，通常不要对它们的盒子类型进行改动
页面区域中包含内容，所以块盒包含行盒
块盒内放置行盒
行盒内不要放置块盒
行盒的显著特征
行盒可被折断，因为内容可被折断换行 可通过word-break属性设置截断位置
同一个包含块中，连续的多个行盒水平依次排列
空白折叠的规则仅适用于行盒内部和行盒之间
行盒与行盒之间的距离可使用水平方向上的margin和padding进行设置
行盒的尺寸
行盒-可替换元素：图片和多媒体
与块盒完全一致
图片和视频，仅设置宽高中的一个时，另一个会自动按比例适应
对于图片和视频，如果同时设置宽高，可通过object-fit属性设置适应方式
object-fit
含义：内容尺寸如何适应，仅用于可替换元素
不可继承
默认值：fill
取值
fill：无视宽高比例缩放，充满设置的尺寸
contain：保持宽高比例缩放，并且保证不超出内容盒
cover：保持宽高比例缩放，充满设置的尺寸，某些部分会被隐藏
none：不进行任何缩放
行盒-非可替换元素：文字类元素
width和height无效
垂直方向上的margin、border、padding不占据布局空间
可使用line-height设置一行的文字高度
line-height属性
含义：行高
可继承
默认值：normal
取值
normal：使用浏览器默认行高
20px：固定值，20个像素的行高
2em：相对值，按当前元素的字体大小计算，计算后被子元素继承
200%：同2em
2【推荐】：按当前元素的字体大小计算，计算前的值被子元素继承
line-height属性可用于单行文字垂直居中
行盒的位置
行盒的定位体系必定的常规流 ：浮动和绝对定位的盒子会自动变成块盒
行盒在包含块中，避开浮动和常规流盒子
包含行盒的块盒，可使用text-align调整行盒在它内部的对齐方式
行盒之间的对齐方式，可使用vertical-align调整【了解】
每一个行盒以及包含行盒的元素，会在其内部创建多根参考线
行盒默认使用基线对齐【vertical-align:baseline】：将自己的基线与包含块的基线对齐
可调整vertical-align属性值，选择其他对齐方式
通常情况下
可使用vertical-align调整图片和其前后文字的对齐方式
可使用vertical-align消除行盒与外部块盒底部的空隙
行块盒
什么是行块盒：display属性值为inline-block的元素生成的盒子
行块盒在某些方面表现的像行盒，某些方面表现的像块盒
与行盒的区别
行块盒内部可以放块盒，行盒不行
行块盒的所有盒模型尺寸都是有效的，而行盒不是
行盒垂直方向上的margin、border、padding的尺寸不占据空间
行盒不能设置宽高
行块盒通常用于宽度自动的水平居中