div标签和span标签区别

*双木林*

于 2020-05-01 22:08:19 发布

阅读量5.1k

点赞数 21

分类专栏： Web前端文章标签： html css html5

本文链接：https://blog.csdn.net/Wangxi_137/article/details/105883035

版权

Web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<div>标签和<span>标签的异与同
相同的地方：

都是成对标签例如<div></div><span></span>
都可以用来设置页面美观显
都可以直接通过style或者<style type="text/css"></style>引入，id选择器（#开头）或者类选择器（.开头）都可以。

不同的地方：
1、同一个样式<div>背景颜色和宽度高度全覆盖，而<span>仅仅覆盖有内容的区域，例子如下：

   <body>
        <div style="width:200px;height:100px;color:red;background:pink;">1234</div>
        <br/>
        <span style="width:200px;height:100px;color:red;background:pink;">1234</span>
    </body>

运行结果如下：
在这里插入图片描述
2、<div>自动换行，而<span>不会，例子如下：

  <body>
        <div style="width:200px;height:100px;color:red;background:yellow;">1234</div>
        <input type="text"/>
        <hr color="green"/>
        <span style="width:200px;height:100px;color:red;background:yellow;">1234</span>
        <input type="text"/>
    </body>

运行结果如下：
在这里插入图片描述