块元素、行内元素和行内块元素的区别以及转换

块元素(block)

  1. 可以设置其宽度、高度,内外边距,独占一行
  2. 默认宽度为100%
  3. 不受空格影响
  4. 可以容纳行内元素和其他块元素

常见的块元素:div,h1~h6,ul,li,p,table等

行内元素(inline-level)

  1. 不支持宽高(宽高根据内容大小自动撑开),自左向右排列
  2. 受空格影响
  3. 默认宽度是自身内容的宽度
  4. 不独占一行

常见的行内元素:span,i,a,b,strong,em,sub,sup等

行内块元素(inline-block)

  1. 支持宽高,自左向右排列
  2. 受空格影响
  3. 不独占一行
  4. 具备块元素和行内元素的所有特点

标签之间的转换

display:

  • none(隐藏,不显示)
  • block(转化为块元素)
  • inline(转化为行内元素)
  • inline-block(转化为行内块元素)

注意:当元素浮动(float)后,不再区分行内和块元素,并且具备两者所有特点

  • 1
    点赞
  • 1
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值