zoukankan      html  css  js  c++  java
  • 负边距布局

    时间--2016-06-03
    知识点:

    margin的负值会让盒子的宽高都相应的变大。
    margin的负值会让出相应的位置。例如本文的案例中margin-right:-300px,这个盒子就会让出右边的宽度为300px的一个空间,后面的元素浮动的话就会占据他让出的空间。

    本文只是个人理解,如有不妥敬请指正。

    案例:
    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    *{
    margin: 0;
    padding: 0;
    }
    #box{
    100%;
    overflow: hidden;
    }
    .left{
    float: left;
    100px;
    height: 300px;
    background: red;
    }
    #content{
    float: left;
    100%;
    height: 400px;
    background: pink;
    margin-right: -300px;
    }
    #content div{
    margin-right: 300px;/*让这个盒子和父元素的右边有300像素的距离,其中300=左边的div宽度(100) + 右边div的宽度(200)*/
    }
    #side{
    float: left;
    background: peru;
    200px;
    height: 300px;
    }



    .wrap2{
    320px;
    border:dashed 1px orange;
    }

    .wrap2 .inner{
    overflow:hidden;
    margin-left:-10px;
    }

    .wrap2 .item{
    float:left;
    100px;
    height:100px;
    margin:10px 0px 10px 10px;
    background:blue;
    }
    </style>
    </head>
    <body>
    <div id="box">
    <div class="left"></div>
    <div id="content">
    <div>
    如果将元素的box-sizing属性设置为"border-box",则width和height表示的是内容、内边距和边框组成区域的高度和宽度。所以增加外边距对内容区域的尺寸没有影响,而增加内边距和边框会导致内容区域的尺寸减小。
    现在开始讨论第一个问题:外边距叠加
    外边距叠加是指当两个或更多垂直外边距相遇时,外边距的高度等于这几个外边距的高度中的较大者。这就是外边距叠加的情况,并且外边距叠加只发生在垂直外边距上。
    </div>
    </div>
    <div id="side"></div>
    </div>

    <div class="wrap2">
    <div class="inner">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    </div>
    </div>

    </body>
    </html>
  • 相关阅读:
    shell (3) 磁盘挂载
    QByteArray 内存拷贝异常
    记录QTextEdit
    QTableWidget 使用
    QT 读写xml
    远程工具长时间待机断网解决办法
    qt读写json文件
    QT 资源文件(.qrc)
    error: C1041: 无法打开程序数据库“E:ProjectQtuild-QCaculator-Desktop_Qt_5_14_1_MSVC2017_32_bit-DebugdebugQCaculator.vc.pdb”;如果要将多个 CL.EXE 写入同一个 .PDB 文件,请使用 /FS
    Vs2019+Qt5.14环境配置,安装qt visual studio tools报错。
  • 原文地址:https://www.cnblogs.com/mishiyang/p/5557157.html
Copyright © 2011-2022 走看看