zoukankan      html  css  js  c++  java
  • margin负值在页面布局中的应用

    http://www.w3school.com.cn/tiy/t.asp 预览工具

    一、左右列固定,中间列自适应布局

    此例适用于左右栏宽度固定,中间栏宽度自适应的布局。由于网页的主体部分一般在中间,很多网页都需要中间列优先加载,而这种布局刚好满足此需求。

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
      body{
            margin:0;
            padding:0;
            min-width:600px;
        }
        .main{
            float:left;
            width:100%;
        }
        .main_body{
            margin:0 210px;
            background:#888;
            height:200px;
        }
        .left,.right{
            float:left;
            width:200px;
            height:200px;
            background:#F60;
        }
        .left{
            margin-left:-100%;
        }
        .right{
            margin-left:-200px;
        }
    </style>
    </head>
    <body>
     <div class="main">
            <div class="main_body">Main</div>
        </div>
        <div class="left">Left</div>
        <div class="right">Right</div>
    </body>
    </html>

    二、去除列表右边框

    项目中经常会使用浮动列表展示信息,为了美观通常为每个列表之间设置一定的间距(margin-right),当父元素的宽度固定式,每一行的最右端的li元素的右边距就多余了,去除的方法通常是为最右端的li添加class,设置margin-right:0; 这种方法需要动态判断为哪些li元素添加class,麻烦!!!利用负margin就可以实现下面这种效果:

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
     body,ul,li{ padding:0; margin:0;}
        ul,li{ list-style:none;}
        #test{
            width:320px;
            height:210px;
            background:#CCC;
        }
        #test ul{
            margin-right:-10px;
            zoom:1;
        }
        #test ul li{
            width:100px;
            height:100px;
            background:#F60;
            margin-right:10px;
            margin-bottom:10px;
            float:left;
        }
    </style>
    </head>
    <body>
    
      <div id="test">
            <ul>
                <li>子元素1</li>
                <li>子元素2</li>
                <li>子元素3</li>
                <li>子元素4</li>
                <li>子元素5</li>
                <li>子元素6</li>
            </ul>
        </div>
    </body>
    </html>

    三、负边距+定位:水平垂直居中

    使用绝对定位将div定位到body的中心,然后使用负margin(content宽高的一半),将div的中心拉回到body的中心,已到达水平垂直居中的效果。

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
     body{margin:0;padding:0;}
        #test{
            width:200px;
            height:200px;
            background:#F60;
            position:absolute;
            left:50%;
            top:50%;
            margin-left:-100px;
            margin-top:-100px;
        }
    </style>
    </head>
    <body>
    
    <div id="test"></div>
    </body>
    </html>

    四、去除列表最后一个li元素的border-bottom

    列表中我们经常会添加border-bottom值,最后一个li的border-bottom往往会与外边框重合,视觉上不雅观,往往要移除。

     如果li的border-bottom颜色与ul的border颜色是一样的时候,在视觉上是被隐藏了。如果其颜色不一致的时候还是有问题,给ul写个overflow:hidden;就可以解决这个问题。

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    body,ul,li{margin:0;padding:0;}
        ul,li{list-style:none;}
        #test{
            margin:20px;
            width:390px;
            background:#F4F8FC;
            border-radius:10px;
            border:2px solid #D7E2EC;
        }
        #test li{
            height:25px;
            line-height:25px;
            padding:5px;
            border-bottom:1px dotted #D5D5D5;
            margin-bottom:-1px;
        }
    </style>
    </head>
    <body>
    
      <ul id="test">
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
        </ul>
    </body>
    </html>

    http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html

    http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

  • 相关阅读:
    POJ-1189 钉子和小球(动态规划)
    POJ-1191-棋盘分割(动态规划)
    Java实现 LeetCode 730 统计不同回文子字符串(动态规划)
    Java实现 LeetCode 730 统计不同回文子字符串(动态规划)
    Java实现 LeetCode 729 我的日程安排表 I(二叉树)
    Java实现 LeetCode 729 我的日程安排表 I(二叉树)
    Java实现 LeetCode 729 我的日程安排表 I(二叉树)
    Java实现 LeetCode 728 自除数(暴力)
    Java实现 LeetCode 728 自除数(暴力)
    Java实现 LeetCode 728 自除数(暴力)
  • 原文地址:https://www.cnblogs.com/viewcozy/p/4578456.html
Copyright © 2011-2022 走看看