关于HTML中块级元素,内联元素,行内元素总结

块盒(块级元素)(display=block)

• 总是独占一行,表现前后有换行,一般占满父元素的整个宽度

  • 1.浏览器默认样式表中的块盒:容器元素,h1~h6,p
  • 2.组成部分:content,padding,border,margin (width,height,padding,margin都可以控制)

行盒(内联元素)(display=inline)

• 和相邻的内联元素在同一行,前后无换行,允许元素一个接一个的排列
  • 1.浏览器默认样式表中行盒:img,span,audio,video,a
  • 2.特点:
    • 盒子沿内容延伸
    • 行盒不能设置宽高 (调整宽高应该使用font-size,font-style,line-height 间接调整)
    • padding (水平方向设置 有效,垂直方向仅仅影响背景,不会占据空间,会覆盖别的盒子而不是挤走)
    • border (水平方向设置 有效,垂直方向仅仅影响背景,不会占据空间,会覆盖别的盒子而不是挤走)
    • margin (水平方向有效,垂直方向完全无效)

行块盒(display=inline-block)

• 不独占一行,前后无换行,允许元素一个接一个的排列
• 块盒模型中所有尺寸全部有效
• 空白折叠

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

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

• 例如:
  • img元素应该如何应用到宽高固定的盒子中
    • 可使用 object-fit
      • contain (不打破比例显示一宽高中最短为标准)
      • fill (打破比例.强行充满盒子(默认值))
      • cover (不打破比例,且 填充满盒子,牺牲图片信息)