zoukankan      html  css  js  c++  java
  • margin负值5种应用

    最近做的项目中经常会用到margin的负值,这里就总结一下关于margin负值的5种使用及相关bug的解决。

    1. 在流动性布局中的应用

    如WordPress的两栏式不固定布局就是使用margin负值来实现的定位,属于左右margin负值在流动性布局中的应用。

        <div style="200px;float:left;border-right:4px solid #CEE1EE;margin-right:-200px;">
        左侧宽度固定
        </div>
        <div style="backround:#888;margin-left:200px;">
        宽度自适应
        </div>

    效果图:

    另外一类两栏自适应用到的是margin的上下负值,尤其在一栏高度固定,另外一栏高度不定的两栏或多栏布局中最为常见。
    高度不固定栏和高度固定的栏上下错开,均无浮动属性,高度不固定的栏margin-top一个负值,
    大小就是高度固定栏的高度,实现了两栏在同一水平线上。且宽度自适应,并且不用担心有浮动出现的一系列问题。
     
    如图:

    样式部分:

    .fixed-height{
    height:200px;
    200px;
    background:#666;
    }
    .flow-height{
    margin-top:-200px;
    margin-left:200px;
    }

    页面结构:

        <div class="container">
        <div class="fixed-height">
        高度固定哦
        </div>
        <div class="flow-height">
        高度宽度自适应。。。
        </div>
        </div>

    2. 在选项卡等边框线的处理

    使用margin-bottom:-1px;解决选项卡下边框显示的问题。

    [注:]使用margin-top、margin-bottom需要看结构如何写,灵活使用。

    类似的,如果您要用七个div实现8条1像素的左右边框,可以让每个div都有左右1像素的边框,然后margin-right:-1px;或是margin-left:-1px;让之间的边框重叠来达到效果。

    3. 图片与文字对齐问题

    当图片与文字在一起,往往都是不对齐的,因为图片和文字默认是底部对齐。

    当图片较小比较明显,使用vertical-align:middle;对齐,在firefox,chrome下能达到理想效果,但是IE下还是有点别扭。

    使用margin负值能在每个浏览器上显示完全一致。img标签支持margin四个方向的正的和负的定位。一般使用img标签来显示图标,要与文字对齐达到理想的效果,可以设置

    img{margin:0 3px -3px 0;}。


    4. 隐藏首(末)边框

    本着结构尽量简洁,样式代码尽量少,减少对js的依赖的原则,我们可以用样式来实现列表项头尾无边框的效果,而无需额外设置诸如<li class=”last”>最后一个</li>

    样式部分:

    <style type="text/css">
    ul{
    margin:30px;
    padding:0;
    300px;
    }
    li{ list-style:none;}
    /** 横排模式 **/
    .cross{
    overflow:hidden;
    zoom:1;
    } /** overflow:hidden隐藏最上边border,IE6需要zoom:1 **/
    .cross li {
    float:left;
    padding:0 11px 0 10px;
    border-left:1px solid #AAA;
    margin-left:-1px;
    } /*margin负值隐藏掉最左边边框*/
    /*竖排模式*/
    .vertical {
    overflow:hidden;
    position:relative;
    zoom:1;
    } /*IE下子容器如果包含属性position:relative,则父容器失效(IE bug),所以也需要设置父容器position:relative解决,IE6需要zoom:1来触发haslayout*/
    .vertical li{
    border-top:1px dashed #CEE1EE;
    padding:5px 0;
    position:relative;
    top:-1px;
    } /*竖排margin负值IE6不兼容,改为positon方式处理,与margin负值原理相同*/
    </style>

    结构部分:


    <ul class="cross">
    <li>tab1-1</li>
    <li>tab1-2</li>
    <li>tab1-3</li>
    <li>tab1-4</li>
    </ul>
    <ul class="vertical">
    <li>这里是一条信息</li>
    <li>这里是一条信息</li>
    <li>这里是一条信息</li>
    <li>这里是一条信息</li>
    <li>这里是一条信息</li>
    </ul>

    5.页面上实现css sprite背景定位效果

    使用img定义margin的负值实现类似background-position效果。此方法能减少一个页面请求数,但是有违样式与布局分离的原则,因此不推荐使用

    ps:

    使用margin负值在IE6/IE7下的bug:有一部分被隐藏掉了

        <div style="height:120px;120px; border: 5px solid #888">
        <div style="margin-top: -10px;position:relative;zoom:1">
        <a href="http://fed.renren.com/">人人前端测试</a></div>
        </div>

    解决方法:添加position:relative; zoom:1;

  • 相关阅读:
    Java实现 蓝桥杯VIP 算法提高 高精度乘法
    Java实现 蓝桥杯VIP 算法提高 高精度乘法
    Java实现 蓝桥杯VIP 算法提高 高精度乘法
    Java实现 蓝桥杯VIP 算法提高 高精度乘法
    Java实现 蓝桥杯VIP 算法提高 高精度乘法
    Java实现 蓝桥杯VIP 算法提高 现代诗如蚯蚓
    Java实现 蓝桥杯VIP 算法提高 现代诗如蚯蚓
    Java实现 蓝桥杯VIP 算法提高 现代诗如蚯蚓
    Java实现 蓝桥杯VIP 算法提高 现代诗如蚯蚓
    ddd
  • 原文地址:https://www.cnblogs.com/aobingyan/p/3793769.html
Copyright © 2011-2022 走看看