CSS行盒的盒模型特点

行盒的盒模型

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

显著特点

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

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

  1. 内边距(填充区)
    水平方向有效,垂直方向不会实际占据空间

  2. 边框
    水平方向有效,垂直方向不会实际占据空间

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

行块盒

display:inlin-block 行块盒

  1. 不独占一行
  2. 盒模型中所有尺寸都有效

空白折叠

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

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

大部分元素在页面上显示的结果,取决于元素的内容,称为非可替换元素 (div,p,span,a)
少部分元素,在页面上显示结果,取决于元素属性,称为可替换元素(img,video,audio)
绝大部门可替换元素均为行盒
可替换元素类似于行块盒,盒模型中所有尺寸都有效

/*一般与img连用,图片不设置高度只设置宽度,图片就会成比例增加*/
object-fit:contain;/* 既要保持宽高比例,图片又不能溢出*/
object-fit:fill;/* 默认取值*/
object-fit:cover;/* 填充满,不能失去比例,只能失去图片内容了*/

如果您发现文章中有不妥之处请与我联系,我将感激不尽
转载著明:sayc.cc 菠萝吹雪的博客

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×