html中的块状标签,浅谈HTML中的行块标签

作为一个初学HTML5的未来程序猿,首先接触的是HTML5中的标签,不同的标签有着不同意义,同时根据标签的特性可以将标签分为三大类:行标签(inline)、块标签(block)和行块标签(inline-block)。

现在来简单介绍一下inline、block和inline-block这三类的特性:

block(块标签):block类型的标签单独占一行,不允许其它类型的标签与它同占一行。但block类型的标签可以被设置宽高,给它所需求的样式,再没有给它设置宽高时,它会继承它的父级的宽度(就是包含它的那个标签,如果没有就继承body的宽度),其中的高度由它里面的内容撑开(就是内容有多少,它的高度就有多少)。block类型的标签对margin和padding有着很好的支持,一般不会出现问题。

inline(行标签):inline类型的标签可以和inline和inline-block同行,但不能和block同行(这是因为block的特性)�。inline类型的标签不能设置它的宽高,其宽高只能由它所包含内容撑开。inline类型的标签对margin和padding支持性较差,设置左右属性较好,设置上下属性时需谨慎使用,以免出现能够避免的麻烦。

inline-block(行块标签):inline-block类型的标签有着inline和block的优秀的属性,是inline和block的结合体。故inline-block类型的标签即能设置其宽高又能和其他类型的标签同行排列(除了block),是一个小万能的。inline-block类型的标签对margin和padding的支持和block相同。

记住,要熟知标签的类型,合理使用标签,提高代码的质量。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值