本系列笔记是基于【渡一教育】袁进老师的html+css基础课程而记录,仅作为个人记录以及阅读使用。
行盒的盒模型
常见的行盒:包含具体内容的元素
span strong em i img vedio audio
显著特点
- 盒子沿着内容延伸
- 行盒不能设置宽高
调整行盒的宽高,应该使用字体大小、行高、字体类型来间接调整
- 内边距(填充区)
padding 水平方向有效、垂直方向仅会影响背景,不会实际占据空间
- 边框
border 同内边距一样
- 外边距
margin 同内边距一样
行块盒
display: inline-block; 的盒子
- 不独占一行
- 盒模型中所有尺寸都有效(区别于行盒的盒模型)
空白折叠
空白折叠,会发生在行盒(行块盒)内部、行盒(行块盒)之间
可替换元素 和 非可替换元素
大部分元素,页面上显示的结果取决于元素的内容,称为非可替换元素
少部分元素,页面上显示的结果,取决于元素,称为可替换元素
-
可替换元素:img video audio
-
绝大部分可替换元素均为行盒
-
可替换元素类似于 行块盒 ,盒模型中所有尺寸都有效
-
img只设置宽或者高时,则高或者宽会自适应
object-fit:contain; /*默认fill*/
/*
contain:不打破原图的比例,但是要把所有内容框进去,显示出来
fill:会显示所有内容,但可能比例会变
cover:保证区域填满,不能打破比例,有些内容会显示不了
*/
参考资料
- 【渡一教育】袁进老师的html+css基础课程
- 【渡一教育】袁进老师相关课程源代码