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

忘是亡心i 2022-06-17 00:12 153阅读 0赞

# 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>

### 显示结果 ###

![1703][]

# 结论 #

抱歉啦，这里只是真的不少，大家可自行了解，哈哈 ，博客水平有限。多练习，多学习。

[1701]: /images/20220617/2c9043dfd8174603b1548b2dc6287510.png
[1702]: /images/20220617/a7dce2ad37524fc8a7345fa7df2f89f0.png
[1703]: /images/20220617/1ca32d2a59374f0aaaa2d04d0bfbc7d1.png