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


    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,无论是100%还是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细枝末节太多了吧!

  • 相关阅读:
    第01组 团队项目-需求分析报告
    团队项目-选题报告
    第08组 Beta冲刺(4/5)
    第08组 Beta冲刺(3/5)
    第08组 Beta冲刺(2/5)
    第08组 Beta冲刺(1/5)
    第08组 Alpha事后诸葛亮
    第08组 Alpha冲刺(6/6)
    第08组 Alpha冲刺(5/6)
    第08组 Alpha冲刺(4/6)
  • 原文地址:https://www.cnblogs.com/sylz/p/5723041.html
Copyright © 2020-2023  润新知