div和span标签

最新推荐文章于 2023-03-09 16:12:58 发布

叫我邱球球

最新推荐文章于 2023-03-09 16:12:58 发布

阅读量579

点赞数

分类专栏：有关CSS 文章标签： div span 心得前端标签

本文链接：https://blog.csdn.net/CallMeQiuqiuqiu/article/details/58129454

版权

有关CSS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

有的小白看到我写的博客的时候可能会有一些疑惑：为什么在学习css的时候要补充两个HTML中的标签呢？

这是因为这两个标签往往需要配合css标签来使用，所以在前面学习HTML的时候并没有很重视学习这两个标签。

-----------------------------------------------------分割线--------------------------------------------------------

什么是div呢？

div的作用：一般用于配合css来完成网页的基本布局，完成网页框架的搭建。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页</title>
    <style type="text/css">
        .header{
            width:980px;
            height:100px;
            background: red;
            margin: auto;
            margin-bottom: 10px;
        }
        .content{
            width:980px;
            height:500px;
            background: green;
            margin: auto;
            margin-bottom: 10px;
        }
        .footer{
            width:980px;
            height:100px;
            background: blue;
            margin: auto;
        }
        .logo {
            width:200px;
            height:50px;
            background: pink;
            float: left;
            margin:20px;
        }
        .nav{
            width:600px;
            height:50px;
            background: purple;
            float: right;
            margin:20px;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
</div>
<div class="content"></div>
<div class="footer"></div>
</body>
</html>

--------------------------------------------------分割线-------------------------------------------------------

什么是span呢？

作用：一般用于配合css修改网页中的一些局部信息。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页</title>
    <style type="text/css">
        span {
            color: red;
        }
    </style>
</head>
<body>
<p>每天进步<span>一点点</span>，做最好的自己</p>
</body>
</html>

span标签可能很容易与label标签相混淆。在此处，要特别注意一下：label标签一般用在表单标签当中，起到一个绑定的作用。

--------------------------------------------------分割线-------------------------------------------------------

span和div有什么区别呢？

①div会单独在一行，而span不会单独在一行。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页</title>
    <style type="text/css">
        span {
            color: red;
        }
    </style>
</head>
<body>
    <div>我是div</div>
    <div>我是div</div>
    <span>我是span</span>
    <span>我是span</span>
</body>
</html>