码迷,mamicode.com
首页 > 其他好文 > 详细

Padding和父子继承宽高之间的关系

时间:2016-07-31 15:56:09      阅读:1501      评论:0      收藏:0      [点我收藏+]

标签:

1、父子之间宽高的继承关系

  父亲有一个宽高,儿子若不设定宽高会继承,继承宽的100%,高度靠自己内容撑开。

2、padding对儿子宽的影响

  看代码:

<style>
    .father{
        width:200px;
        height:200px;
        background:red;
    }
    .son{
        background:purple;
    }
</style>
<body>
    <div class="father">
        <div class="son">123</div>
    </div>
</body>    

这个时候,儿子完全继承父亲的宽,高度有自己的内容高度撑开。运行结果:

技术分享

这个时候,修改代码,在.son中加上padding-left:50px;会发现盒子宽度并没与改变。

<style>
    .father{
        width:200px;
        height:200px;
        background:red;
    }
    .son{
        background:purple;
        padding-left:50px;//新添加的
    }
</style>
<body>
    <div class="father">
        <div class="son">123</div>
    </div>
</body>    

运行结果如图所示:

技术分享

可是如果你非要再给儿子加上一个width,无论是width:100%还是width:200px;这个时候,padding就会起作用。

<style>
    .father{
        width:200px;
        height:200px;
        background:red;
    }
    .son{
        background:purple;
        width:100%;//新添加的
        padding-left:50px;
    }
</style>
<body>
    <div class="father">
        <div class="son">123</div>
    </div>
</body>    

运行结果:

技术分享

 

总之,宽度最好能不写就不写。CSS细枝末节太多了吧!

 

Padding和父子继承宽高之间的关系

标签:

原文地址:http://www.cnblogs.com/sylz/p/5723041.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!