CSS基础之行盒的盒模型

行盒的盒模型

display:inline
常见的行盒: 包含具体内容的元素

span , strong, em , i , img, video, audio

显著特点

1. 盒子的大小沿着内容延申

2. 行盒不能设置宽高, 行盒的宽高取决于内容的多少, 字体的大小, 行高. 所以调整行盒的宽高, 应该使用字体的大小, 行高, 字体类型, 间接调整

3. 内边距（填充区）

   水平方向有效，垂直方向仅会影响背景，不会实际占据空间

4. 边框

   水平方向有效，垂直方向不会实际占据空间。

5. 外边距
   水平方向有效，垂直方向不会实际占据空间。

行块盒

display:inline-block的盒子
既有行盒的部分特性,又有块盒的部分特性;
如:1. 不独占一行,2. 盒模型中所有的尺寸都有效(可以设置宽高)

空白折叠

空白折叠,发生在行盒(行块盒)内部或行盒(行块盒)之间

如果不像有间隙, 就将所有的a元素排在一起,消除之间的空白

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

大部分元素, 页面上显示的结果, 取决于元素的内容, 称为非可替换元素

少部分元素, 页面上显示的结果,取决于元素的属性,称为可替换元素

可替换元素: img, video, audio

绝大部分可替换元素均为行盒.

可替换元素类似于行块盒, 行模型中的所有尺寸都可以设置