css margin,padding的百分比的距离。。

margin,padding是设置一个dom对象距离外边距和内边距的css属性。具体作用就不在详细的说了,今天发现可以赋给这两个属性百分比的值。。那么这个百分比的值,是怎么计算的?先看下面的例子:

<style type="text/css">
    html{
        height: 100%;
        width: 1000px;
    }
    #parent{
        height: 200px;
        width: 100%;
        background: #ccc;
    }
    #test{
        padding-top: 10%;
        margin-left: 10%;
        background: red;
    }
</style>
<div id='parent'>
    <div id='test'>Hello world</div>
</div>

下面是谷歌浏览器的布局

C3AB479F-96F0-403F-9C59-45B0AE761797

 

很明显,margin-top和padding-top的值是100px 经过多次试验发现这个百分比是根据父容器的宽度计算的。

发表评论

电子邮件地址不会被公开。

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>