margin padding width height left top right bottom 百分比

当元素的margin padding为百分比时，相对的是距离当前元素最近的父元素的宽度而言(不包含 border padding margin的值，如果父元素没有宽度，则实际宽度还包括父元素的margin负值)；

当元素的没有设置宽度/高度时，margin负值会改变元素的宽度/高度，如果设置有宽度/高度，则之后影响元素的位置

1 实现元素宽高相等的想法：

<div class='demo'>

　　<div class='li'></div>

</div>

.demo{

200px;

}
.demo .li{

100%;

padding-top:100%;

}

width height 百分比，分别对应的是最近父元素的宽度和高度(包含padding值)

margin负值：

1 实现队列等高布局，子元素设置padding-bottom比较大的值，这时候父元素的高度就会别撑大，再设置子元素margin-bottom负值为padding-bottom的值，两个值相互抵消，父元素的高度就不会变了，（margin-bottom负值会影响文档流，本来文档流的高度使从父元素的顶端到子元素的最低端的高度，margin负值，文档流就向上退回相应的值）但是子元素的高度是已有高度值与padding-bottom的和，所以需要设置父元素overflow：hidden；子元素高度改变时，其他子元素就跟着改变了

<div class='demo1'>
       <div class='left'></div>
        <div class='right'></div>
</div>


.demo1{
  display: flex;
 overflow: hidden;
  .left{
   200px;
  padding-bottom: 2000px;
  margin-bottom: -2000px;
  background-color: red;
  }
  .right{
    flex:1;
    height: 200px;
    padding-bottom: 2000px;
  margin-bottom: -2000px;
  background-color: blue;
  }
}

定位left top right bottom 百分比值，left right 是相对于父元素的宽度*百分比，top bottom是相对于高度值*百分比