欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

绝对定位与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>

总结:

  1. 当三个div在同一级时,若最后一个div绝对定位,则倒数第二个设置margin-bottom无效,所以若想第二个div的margin-bottom有效果,需要给前两个div设一个父div ;
  2. div2和div5左右居中的方法是分别设置width,然后left:50%,margin-left:-width/2。

矩形没设置display:none
绝对定位与margin-bottom
矩形设置display:none
绝对定位与margin-bottom

相关标签: 矩形 定位