CSS10.行盒盒模型

行盒的盒模型

常见的行盒：包含具体内容的元素

span、strong、em、i、img、video、audio

显著特点

1. 盒子沿着内容沿伸

 

2. 行盒不能设置宽高

调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整

 

3. 内边距（填充区）

水平方向有效，垂直方向仅会影响背景（背景变，但字体还是不动），不会实际占据空间。

 

4. 边框

水平方向有效，垂直方向仅会影响边框粗细（边框变，但字体还是不动），不会实际占据空间。

 

5. 外边距

水平方向有效，垂直方向还是不动，不会实际占据空间。（test2）

 

行块盒

可以设置盒模型中的每一个尺寸

display：inline-block 的盒子（既有行盒的特点又有块盒的特点）(test3)

1. 不独占一行

2. 盒模型中所有尺寸都有效

 

空白折叠

空白折叠，发生在行盒（行块盒）内部或行盒（行块盒）之间

 

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

大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素（div、p、span、a）

 

少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素（img、video、audio）

 

绝大部分可替换元素均为行盒（img就是行盒的格式，但是宽高还有边框都有效，宽度和高度如果只设置一个的话会按比例增加）。

 

在img中，通过下面属性来调整图片比例 ：

• object-fit：contain

• object-fit：fill（默认取值，整个图片填充满，比例会变化）

• object-fit：cover（保证把区域填充满没有空隙，但又不能没有比例，所以只能图片的一些信息）

 

可替换元素类似于行块盒，盒模型中所有尺寸都有效