div搜索框与按钮不在一行_网站建设公司讲解:div与span标记

网站建设公司深圳市博纳网络信息技术有限公司()讲解:div与span标记

在HTML页面中,div和span标记都可以看做是一个盒子,盒子中内容可以是任意元素。如果标记中没有内容,那么这两个标记可以看做是空标记,在HTML页面中插入空标记不会对页面产生任何效果。

通常情况下,div元素被称为块元素,而span元素被称为内嵌元素。这是因为在没有设置样式的情况下,div元素需要单独用一行,即使div元素中只有一个字符,也单独占用一行,span元素则根据内容的多少决定占用多宽的距离,例如下面这段代码,可以非常直观地展示div元素和span元素在这方面的区别,

efcdb545868ec40bc33937047ce9e884.png

效果如图

8d47112d75019d11db02bd213d6f0c91.png

在HTML中还有很多块级元素,他们都有一个共同的特点,那就是单独占用一行。他们的这个特点由display属性进行设置,如果display属性设置为block,则该元素就是一个块级元素;如果设置成inline,则该元素就是一个内嵌元素。所以div元素和span元素还可以通过css样式设置转换器特点,例如下面这段代码:

12ee95fb468df1c26ed32371201db50f.png

在这段代码中,我们将div元素的display属性设置为inline,将span元素display属性设置为bolck。运行这段代码后,我们会发现div原则不在单独占用一行,而是根据div元素中内容的宽度进行缩放,而span元素则单独占用了一行,效果如图:

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值