<div class="parent"> <div class="child"> <span>NO THANKS</span> </div> </div>
.parent { width: 200px; height: 100px; } .child { width: 50%; //和预期的一样:父元素的width的50%,200px * 50% =100px; height: 50%; //和预期的一样:父元素的height的50%,100px * 50% =50px; margin-top: 10%; //和预期的不一样:父元素的width的10%,200px * 10% =20px; margin-bottom: 10%; //和预期的不一样:父元素的width的10%,200px * 10% =20px; margin-left: 10%; //和预期的一样:父元素的width的10%,200px * 10% =20px; margin-right: 10%; //和预期的一样:父元素的width的10%,200px * 10% =20px; top: 10%; //和预期的不一样:父元素的width的10%,200px * 10% =20px; bottom: 10%; //和预期的不一样:父元素的width的10%,200px * 10% =20px; left: 10%; //和预期的一样:父元素的width的10%,200px * 10% =20px; right: 10%; //和预期的一样:父元素的width的10%,200px * 10% =20px; }
综上,
除了width和height,其他属性在用到百分比来计算的时候,都是按照父元素的width属性来计算的。