测试position和margin的百分比

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      /*测试top百分比*/
      .box {
        background: #66e6ff;
        position: absolute;
        top: 0;
        left: 0;
        width: 1000px;
        height: 500px;
        /*padding: 100px;*/
      }
      .pox {
        background: #f0f;
        width: 30%;
        position: absolute;
        top: 10%;
        right: 10%;
        z-index: 99999;
      }

      /*测试margin百分比*/
      .box1 {
        margin: 600px 0;
        background: #ccc;
        border: 1px solid #ccc;
        width: 1000px;
        height: 500px;
      }
      .pox1 {
        background: #f0f;
        width: 30%;
        height: 10%;
        margin-top: 10%;
        margin-left: 10%;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <div class="pox">
        测试position的百分比：
        position的left的百分比是根据父元素的宽度来取值的,如果父元素有paddding,则根据width+padding
        position的top的百分比是根据父元素的高度来取值的,如果父元素有paddding,则根据height+padding
      </div>
    </div>

    <div class="box1">
      <div class="pox1">
        测试margin的百分比：
        margin的值是百分百的时候，其值是基于父元素的宽度来计算的，并非是自身的宽度，
        padding 百分比的取值也是一样的,
        width的高度百分比是按其父元素的宽度来计算的
        height的高度百分比是按其父元素的高度来计算的
      </div>
    </div>
  </body>
</html>
测试position和margin的百分比

猜你喜欢
