• CSS div的三种结构水平垂直包含margin的计算


      <style>
            * {
                margin: 0;
                padding: 0;
                color: #fff;
                font-size:12px;
            }
    
            body {
                background: grey;
            }
    
            body>div {
                 550px;
                height: 120px;
                background: blue;
                margin-top: 5px;
            }
    
            .parent1:after {
                clear: both;
                 0;
                height: 0;
                content: '';
                display: block;
                visibility: hidden;
            }
    
            .parent {
                position: relative;
            }
    
            .parent>div {
    
                 100px;
                height: 30px;
    
                background: orange;
            }
    
            .parent1>div {
                float: left;
            }
    
            .parent1 span {
                 40px;
                height: 60px;
                background: red;
                position: absolute;
                left: 120px;
                top: 50px;
            }
    
            .parent1 .child {
                margin: 10px 20px;
            }
    
            .parent2 .child {
                margin: 10px 20px;
            }
    
            .parent2 span {
                 100px;
                height: 10px;
                background: red;
                position: absolute;
                left: 120px;
                top: 30px;
                text-align: right;
            }
           .parent3 .child1 {
                margin-bottom:10px;
            }
                   .parent3 .child2 {
                margin-top:20px;
            }
    
            .parent3 span {
                 100px;
                height: 20px;
                background: red;
                position: absolute;
                left: 100px;
                top: 30px;
                text-align: right;
            }
            .parent4 {
                padding: 10px;
            }
    
            .parent4 .child {
                margin: 10px;
            }
    
            .parent4 span {
    
                 20px;
                height: 60px;
                background: red;
                position: absolute;
                left: 0;
                top: 50px;
            }
        </style>
    </head>
    
    <body>
        <div class="parent parent1">
            <div class="child">margin-left:10px;</div>
            <div class="child">margin-rihgt:10px;</div>
            <h3>水平结构</h3>
            <span>宽度40px</span>
        </div>
        <div class="parent parent2">
            <div class="child">margin-bottom:10px;</div>
            <div class="child">margin-top:10px;</div>
            <h3>垂直结构</h3>
            <span>高度10px</span>
        </div>
        <div class="parent parent3">
            <div class="child child1">margin-bottom:10px;</div>
            <div class="child child2">margin-top:20px;</div>
            <h3>垂直结构</h3>
            <span>高度20px</span>
        </div>
        <div class="parent parent4">
            <div class="child">包含结构</div>
         <h3>  包含结构 父元素padding-rihgt:10px;子元素margin-left:10px;</h3>
            <span>红色20px</span>
        </div>
    
    
    </body>
    
    </html>
    

      

    结论:

    1:水平结构第一个盒子的   右边距等于 左边盒子的margin-right  +右边盒子的margin-left;【相加】

    2:垂直结构第一个盒子的  下边距等于  上边盒子的margin-bottom和下边盒子的margin-top比较一下,【取最大值】

    3:包含结构子元素的margin-left   等于父元素的padding-rihgt   +子元素的margin-left 【margin+padding相加】

  • 相关阅读:
    Extjs4.x Ext.tree.Panel基本树控件的使用案例、源码
    Extjs4 autoload和iframe的取舍
    Extjs4 文件目录结构
    IIS7.5 配置MVC3.0 伪静态,不能访问html伪静态页面
    DB2存储过程模版
    C#后台调用跨域MVC服务,带Cookie验证
    基于SenchaTouch项目案例
    EF Code First DataAnnotations
    找不到方法:“Void System.Data.Objects.ObjectContextOptions.set_UseConsistentNullReferenceBehavior(Boolean)”。
    Babylon 3D engine (Silverlight)
  • 原文地址:https://www.cnblogs.com/xingkongly/p/7531330.html
Copyright © 2020-2023  润新知