margin属性的百分比值参照

最近在整理内容的时候看了一些关于css布局的内容,虽然都是很常见的属性,但是长时间的浅显的使用方式导致自己忘记了很多深层的含义,今天就记录一下margin-left的使用

  <style>
    .out {
      width: 100%;
      height: 500px;
      background-color: pink;
    }
    .inner {
      width: 100px;
      height: 100%;
      background-color: skyblue;
      margin-left: 100%;
      margin-left:100px;
    }
  </style>
  <div class="out">
    <div class="inner"></div>
  </div>

当使用margin-left:100px的时候是元素相对于自己的父级盒子的内边距的距离,当使用的100%的时候这是的参照是所在的父级元素的宽度