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

来源：互联网发布：popper.js是什么编辑：程序博客网时间：2024/05/20 16:42

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

结论

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

0 0