HTML+CSS基础入门-第十七天（CSS-盒模型）

最新推荐文章于 2020-02-23 18:23:37 发布

原创最新推荐文章于 2020-02-23 18:23:37 发布 · 384 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #盒模型

html+css 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了HTML中的div和span元素，重点讲解了它们作为块级元素和内联元素的区别。此外，深入探讨了CSS盒模型，包括盒模型的组成部分：margin、padding、border以及width和height。通过实例代码展示了如何设置内外边距和边框，建议读者通过实践加深理解。

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

div和span

DIV和SPAN在整个HTML标记中，没有任何意义，他们的存在就是为了应用CSS样式，

div和span的区别

span是内联元素
div是块级元素

代码

<!DOCTYPE html>
<head>
    <title>CSS 盒模型</title>
    <meta charset="utf-8">
    <style type="text/css">
    .div{
        background-color:red;
    }
    .span{
        background-color:green;
    }
    </style>

</head>
<body>
    <div class="div">div块级元素</div>
    <span class="span"> span内联元素</div>
</body>

显示结果

1701

结论

div元素占有整行
span只占有所含内容大小

盒模型

每一个网页可以看做一个盒模型，每一个div和span也可以看做一个盒模型，总之盒模型都是用来装载内容的。
- margin：盒子的外边距
- padding：盒子的内边距
- border：盒子的边框宽度
- width：盒子宽度
- weight：盒子高度

盒模型的表现

在浏览器中点击f12即为审查元素
如图：
1702

在右侧即为审查元素的内容，此时选中审查元素中的body标签，可看到右边的盒子，中有body的狂傲以及外内边距。

设置内外距离以及边框

代码

<!DOCTYPE html>
<head>
    <title>CSS 盒模型</title>
    <meta charset="utf-8">
    <style type="text/css">
    .div{
        background-color:red;
    }
    .span{
        background-color:green;
    }
    body{
        margin:10px;
        padding:10px;
        border:solid 10px;
    }
    </style>

</head>
<body>
    <div class="div">div块级元素</div>
    <span class="span"> span内联元素</div>
</body>