Html 行内标签和块标签

html一般具有行内标签和块标签
行内标签是指两个行内标签在一起不会分行 比如<strong><a>标签等

<strong><a href="http://www.baidu.com" target:"_blank">百度一下</strong></a>
<strong><a href="http://www.baidu.com" target:"_blank">百度一下</strong></a>

可以看到这里并没有换行可以看到,这两个标签在一起并没有换行

而块标签是指一个标签独占一行 比如<div><h1>

<div>块标签</div>
<div>块标签</div>

两个标签并没有在同行使用块标签可以看到2个标签并没有在同行,而是从上到下的顺序进行排列的

如果块标签要进行像行内标签一样从左到右或是从右到左的排列,就需要使用到浮动
<div style="float:left/right">块标签</div>
<div style="float:left/right">块标签</div>

这里写图片描述
浮动就是让块标签独占一行的性质消失让内容可以左右排列。
但是浮动需要满足所有浮动的标签不能超过总框的宽度,不然会出现在下一行。
浮动的框不算入行数内的,所以如果不解除浮动在浮动标签后面再写入一个新的框,会导致新的框会把浮动框的样式覆盖
这个时候就需要用到clear:both
<div style="clear:both">
一般新建一个框写在浮动的框后面就可以了,这样会让之前浮动的框全部组成一个块标签。之前新写的框也就不会覆盖写过浮动的框而是在浮动完成后的框的下面排序的。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值