绝对定位与margin-bottom
程序员文章站
2022-04-03 16:51:41
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>矩形图</title>
<script src="./js/vue.min.js"></script>
</head>
<style type="text/css">
.div1{
width: 100px;height: 200px;background-color: black;position:absolute;
}
.div2{
background-color: white;position:absolute;bottom:0;
}
.div3{
width: 10px;height: 10px;background-color: red;border: 1px solid yellow;margin-bottom:10px;
}
.div4{
width: 10px;height: 100px;background-color: blue;margin-bottom:0px;/*display: none;*/
}
.div5{
width: 1000px;height: 1px;background-color: black;position: absolute;bottom: 0;
}
</style>
<body>
<div class='div1'>
<div class='div2'>
<div class='div3'></div>
<div class='div4'></div>
</div>
<div class='div5'></div>
</div>
</body>
</html>总结：
- 当三个div在同一级时，若最后一个div绝对定位，则倒数第二个设置margin-bottom无效，所以若想第二个div的margin-bottom有效果，需要给前两个div设一个父div ；
- div2和div5左右居中的方法是分别设置width,然后left:50%,margin-left:-width/2。
矩形没设置display:none
矩形设置display:none