学习笔记（二）：盒子模型
对于这部分，在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>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
网页显示
演示3.png
以上是我个人对于绝地定位和浮动模型的理解和区别，然后这也是我这次最大的收获，希望能够帮到大家。
上面代码缩进有点问题，希望不会影响大家阅读。
网友评论