1.什么是<div>标签
div标签可以理解为一个装载其他元素的容器。<div> 是一个块级元素，它的内容自动地开始一个新行， <span style="display:block">（不管该行是否能容纳下内容都自动换行显示另一个块级元素）。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
块级元素对应的是行内元素inline-block;若容器为行内元素，那么在容器中的所有内容在一行中排列，当一行不能完全容纳下内容是自动转到第二行排列。
div标签是成对出现的
<div>
</div>2.div 没有属性控制时，显示在页面上是看不见的，我们可以通过控制div的边框来显示div容器，设置容器的宽度width高度height
<style type="text/css">
div{
border: 10px solid #ff0000;
width: 500px;
height: 300px;
}
10px表示边宽，solid表示实线，#ff0000表示颜色;div 的宽度和高度计算的是内边距
3.div的margin属性
margin属性是控制div的外边距，即容器与容器之间的距离。margin有四个方向：margin_top(顶部)、margin_bottom(底部)、margin_left(左边)、margin_right(右边)。margin属性是在div容器向外圈出一片地区，已有的大小不改变。
当两个div设置的margin区域重叠时，显示效果为margin值大的覆盖margin值小的。
css控制的div样式代码：
<style type="text/css">
.outer{
border: 10px solid #ff0000;
width: 500px;
height: 300px;
padding: 10px;
box-sizing: border-box;
padding-top: 20px;
}
.inner1{
text-align: center;
border: 10px solid #634eff;
padding-top: 20px;
margin-top: 20px;
margin-bottom: 20px;
}
.inner2{
text-align: center;
border: 10px solid #634eff;
margin-top: 10px;
}
</style>
div代码：
<body >
<div class="outer">
<div class="inner1">北京欢迎你！ </div>
<div class="inner2">北京欢迎你！ </div>
</div>
</body>结果图
4.div的padding属性
padding属性是容器边框与内容之间的距离。paddding有四个方向：paddding_top(顶部)、paddding_bottom(底部)、paddding_left (左边)、paddding_right(右边)。
没有padding属性的CSS样式
<style type="text/css">
.outer{
border: 10px solid #ff0000;
width: 500px;
height: 300px;
}
.inner1{
border: 10px solid #634eff;
}
</style>
div代码：
<div class="outer">
<div class="inner1">北京欢迎你！ </div>
</div>显示结果图：
在.outer中添加 padding_top:20px;后显示效果如图:
padding在自己内部画出一片区域，并改变自己的大小。
5.div的box-sizing属性
box-sizing属性中包括border-box和content-box两个属性内容。
box-sizing: border-box;是容器div自身的大小不改变。容器的宽度和高度的计算公式为：height/width=border+padding+content；
box-sizing: content-box;改变容器自身的大小，不变的是内容的大小。容器宽度和高度的计算公式为：height/width=content。
2197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
