margin值类型为百分比

margin的值类型有两个
1、px（像素）
2、%（百分比）
这里主要描述当margin的 值为百分比的时候， 会出现的一个你意想不到的情况！

<div class="container">
    <div class="mg_top"></div>
</div>

<style type="text/css">
    .container{width: 600px ;height: 400px; background-color: #eee;border: solid 1px #ddd;}
    .mg_top{width :100px; height: 50px ;background-color: #cce;margin-top: 10%;margin-left: 10%;}
</style>

外层的div 大小是600px 宽 ，400px高。
内层的div 大小是100px宽 ，50px 高。
内部div的margin 值设置成了百分比的形式，结果 margin的值都是
宽度X10%；

如果需要margin-top 、margin-left是高度的10% 你需要加一个

 -webkit-writing-mode: vertical-rl; /* for browsers of webkit engine */
    writing-mode: tb-rl; /* for ie */

不可能做到left 或者right 以宽度为参照，top和bottom 以高度为参照。
我们都知道margin值的个数有多重组合形式，当margin：10%；只有一个值的时候，请问浏览器改怎么计算留白呢？