学习笔记（二）：盒子模型

对于这部分，在CSS样式中，我从刷慕课网开始，就是有点懵的。对于各种模型：流动模型、浮动模型、层模型；以及层模型中的：绝对定位、相对定位和固定定位，它们的作用都不是很清楚。通过这次作业，我对于浮动模型和层模型中的绝对定位有了一定的理解。下面是我总结的一些东西。

错误之处

首先，我的老师可能也是针对性的给我布置的作业，因为作业中只有一个个盒子。我在完成的作业中，用的都是绝对定位。何为绝对定位呢？我通过自己的使用，有了一定的了解，用通俗的话来说，就是相对于浏览器页面的定位。意思就是，它的right，left，top，bottom都是相对于浏览器的边框来说的，与其他的盒子无关。
如下代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style tape="text/css">
.div1{
position: absolute;
width: 200px;
height: 100px;
background: blue;
top: 0;
}
.div2{
position: absolute;
width: 200px;
height: 100px;
background: black;
left: 300px;
top: 0;
}
</style>

</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>

网页上显示为

演示1.png

如果将div2代码改成如下

.div2{
position: absolute;
width: 200px;
height: 100px;
background: black;
left: 100px;
top: 0;
}

网页上显示会有覆盖现象

演示2.png

收获

如果用浮动模型就不会出现以上现象。这个是相对于原有模型的定位，而不是浏览器。
如下代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style tape="text/css">
.div1{
float: left;
width: 200px;
height: 100px;
background: blue;
margin: 0px;
}
.div2{
float: left;
width: 200px;
height: 100px;
background: black;
margin-left: 10px;
}
</style>