CSS基础（9）- 行盒的盒模型

本系列笔记是基于【渡一教育】袁进老师的html+css基础课程而记录，仅作为个人记录以及阅读使用。

行盒的盒模型

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

span strong em i img vedio audio

显著特点

1. 盒子沿着内容延伸
2. 行盒不能设置宽高

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

3. 内边距（填充区）

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

4. 边框

border 同内边距一样

5. 外边距

margin 同内边距一样

行块盒

display: inline-block; 的盒子

1. 不独占一行
2. 盒模型中所有尺寸都有效（区别于行盒的盒模型）

空白折叠

空白折叠，会发生在行盒(行块盒)内部、行盒（行块盒）之间

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

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

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

• 可替换元素：img video audio

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

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

• img只设置宽或者高时，则高或者宽会自适应

object-fit:contain; /*默认fill*/
/*
contain：不打破原图的比例，但是要把所有内容框进去，显示出来

fill：会显示所有内容，但可能比例会变

cover：保证区域填满，不能打破比例，有些内容会显示不了

*/
1
2
3
4
5
6
7
8
9

参考资料

1. 【渡一教育】袁进老师的html+css基础课程
2. 【渡一教育】袁进老师相关课程源代码