HTML盒子模型
一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：
width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距
（padding-left；padding-right；padding-top;padding-bottom）
border：边框
(boder-left;boder-right;boder-top;boder-bottom)
margin：外边距
(margin-left;margin-right;margin-top;margin-bottom)
标准盒子模型：
标准盒子模型
IE盒子模型：
IE盒子模型
综合div的布局进行照片墙的布局成果
盒子模型布局成果
代码储存：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.divtotle {
border: 7px;
width: 200px;
height: 400px;
background-color: yellow;
float: left;
}
</style>
</head>
<body>
<!--
作者：407990108@qq.com
时间：2018-07-06
描述：第一条div
-->
<div class="divtotle">
<div style="width: 60px; height: 100px; border:7px solid grey; margin: 20px; margin-left: 110px;">
<img src="img/div-1-1.jpg" width="60px" height="100px" />
</div>
<div style="width:150px; height:100px;border: 7px solid grey;margin: 20px;margin-top: 30px;">
<img src="img/div-1-2.jpg" width="150px" height="100px" />
</div>
</div>
<!--
作者：407990108@qq.com
时间：2018-07-06
描述：第二条div
-->
<div class="divtotle">
<div style="width: 150px; height: 180px; border: 7px solid grey; margin: 10px; ">
<img src="img/div-2-1.jpg" width="150px" height="180px" />
</div>
<div style="width:150px; height:100px;border: 7px solid grey;margin: 10px;">
<img src="img/div-2-2.jpg" width="150px" height="100px" />
</div>
</div>
<!--
作者：407990108@qq.com
时间：2018-07-06
描述：第三条div
-->
<div class="divtotle">
<div style="width: 120px; height: 50px; border: 7px solid grey; margin: 10px; ">
<img src="img/div-3-1.jpg" width="120px" height="50px" />
</div>
<div style="width:120px; height:120px;border: 7px solid grey;margin: 10px;">
<img src="img/div-3-2.jpg" width="120px" height="120px" />
</div>
<div style="width:120px; height:50px;border: 7px solid grey;margin: 10px;">
<img src="img/div-3-3.jpg" width="120px" height="50px" />
</div>
</div>
<!--
作者：407990108@qq.com
时间：2018-07-06
描述：第四条div
-->
<div class="divtotle">
<div style="width: 60px; height: 100px; border: 7px solid grey; float: left;margin: 10px; display: inline;">
<img src="img/div-4-1.jpg" width="60px" height="100px" />
</div>
<div style="width:60px; height:100px;border: 7px solid grey;margin: 10px;float: left;display: inline;">
<img src="img/div-4-2.jpg" width="60px" height="100px" />
</div>
<div style="width:150px; height:180px;border: 7px solid grey;margin: 10px;margin-top: 150px;">
<img src="img/div-4-3.jpg" width="150px" height="180px" />
</div>
</div>
<!--
作者：407990108@qq.com
时间：2018-07-06
描述：第五条div
-->
<div class="divtotle">
<div style="width: 150px; height: 100px; border: 7px solid grey; margin: 10px; ">
<img src="img/div-5-1.jpg" width="150px" height="100px" />
</div>
<div style="width:60px; height:100px;border: 7px solid grey;margin: 10px;">
<img src="img/div-5-2.jpg" width="60px" height="100px" />
</div>
</div>
</body>
</html>
小白解释：
1.在进行布局时候，首先脑袋里要有大概的整体印象，知道自己要建立几块布局，具体大概的尺寸，需要的像素。
2.对于margin，padding，border的应用
margin，分为上下左右，如果默认了一个margin，要进行微调的情况下，那么会以新的命令为准。
padding 是内容外面的边距，要包括在整个div的大小下面。
border 也占有一定的空间，所以要进行调整好。
学习体会：
最开始为了布局添加一些白色的div充当边框，学习了盒子模型后，非常的便捷，操作起来简直飞一般的体验，不用琢磨那么久了，哈哈哈。所以，还是知识的积累和涉及的面不够广，要多进行学习和体验！加油，侯小强！！啦啦啦！！！
