CSS之Div+Css布局（一）_div加css的布局-优快云博客

本文链接：https://blog.youkuaiyun.com/lxjstudyIT/article/details/52434149

本文介绍了CSS中Div与Span标签的区别，通过代码演示展示了它们在网页布局中的应用，并探讨了盒模型在网页设计中的作用。这是一个关于CSS基础布局的入门教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在html部分学到的div标签，感觉上并没有多大用途，但是结合CSS的话，它的作用就多了。下面来看看div与css的结合使用。

代码演示(div和span)：

<html>
    <head>
        <title>Div+Css布局(div+span)</title>
        <meta charset="utf-8">
        <style type="text/css">
            div{
                background-color:green;
                color:#fff;
            }
            span{
                background-color:green;
                color:#fff;
            }
            body{
                margin:0px;
                padding:0px;
            }
            div{
                width:200px;
                height:200px;
                padding:0px;
                margin:0px;
                border:solid 10px;
            }
        </style>
    </head>
    <body>
        <div>博客div</div>
        <div>博客div</div>
        <span>博客span</span>
        <span>博客span</span>
    </body>
</html>

运行结果：
这里写图片描述
从上面代码就可以看出div标签与span标签的区别了。

关于盒模型，推荐大家可以看慕课网盒模型开始的介绍视频。
盒模型–宽度和高度
盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。
因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
这里写图片描述

代码演示（盒模型）：

<html>
    <head>
        <title>Div+Css布局(盒模型)</title>
        <meta charset="utf-8">
        <style type="text/css">
            .div{
                width:600px;
                height:600px;
                margin:0 auto;
                margin:0 auto;
                background-color:green;
            }
            .diva{
                float:left;
                width:240px;
                height:240px;
                background-color:red;
            }
            .divb{
                float:left;
                float:left;
                width:240px;
                height:240px;
                background-color:yellow;
            }
            .div div{
                margin:10px;
                padding:10px;
                border:solid 10px;
            }
        </style>
    </head>
    <body>
        <div class="div">
            <div class="diva"></div>
            <div class="divb"></div>
        </div>
    </body>
</html>