margin負值使用之八大絕技

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> margin負值使用之八大絕技

margin負值使用之八大絕技

編輯：CSS詳解

相信關於margin負值的使用，每個人都有自己的一套方法。在這裡，整理了一下平時常用的一些margin負值制作的效果，與大家分享！

先來看一下margin負值的原理解析圖：

當給一個元素設置margin 負值（top/left）,該元素將在該方向上產生位移。例如：

/* 元素向上位移10px */

.demo {margin-top:-10px;}

二、當給一個元素設置margin負值（bottom/right）,這個元素並不會像你所預想的產生位移，而是將任何緊隨其後的元素“拉”過來，覆蓋在自己的上邊。例如：

/* 所有緊隨元素demo之後的元素向上位移10px */

.demo {margin-bottom:-10px;}

注：如果元素沒有設置寬度，那麼給該元素設置margin負值(left/right)將會在兩個方向增大其寬度，看起來就好像給該元素添加了padding。

【案例解析】

一、三欄顯示（無需浮動及額外標簽）;

列表過長時，我們一般都會考慮通過浮動來使之顯示為多列，其實換個思路也可以實現。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>negative margin 之列表三欄顯示</title>
    <style>
    *{margin:0;padding:0;font-size: 14px;}
    .goback{clear:both;height:30px;line-height:30px;text-align: center;}

    ul {list-style:none;}
    li {width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.3em;}
    .col2 {margin-left:120px;}
    .col3 {margin-left:240px;}
    .top {margin-top:-2.6em;}
    </style>
</head>
<body>
    <ul>
        <li class="col1">10家國企年招待費超29億 被指僅用於吃喝</li>
        <li class="col1">媒體稱中國豪車市場因政府嚴控公車快速萎縮</li>
        <li class="col2 top">菲發言人笑答射殺台漁民事件</li>
        <li class="col2">情婦打越洋電話提供證據</li>
        <li class="col3 top">雷政富涉嫌受賄罪被檢察機關提起公訴</li>
        <li class="col3">日稱沖繩久米島附近海域發現疑似中國海軍潛艇</li>
    </ul>
</body>
</Html>

二、疊加效果；

最常見的選項卡，當前項選中狀態；

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>negative margin 之疊加</title>
    <style>
    *{list-style:none;margin:0;padding:0;font-size: 12px;}
    .clearfix:after {
    clear: both;
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
    content: "";
}
    .clearfix {*zoom:1;}
    .goback{clear:both;height:30px;line-height:30px;text-align: center;}
    
    .demo{width:400px;}
    .tab{
    border-bottom:1px solid #66CC66;
    }
    .tab li{
    float:left;
    display:inline;
    margin-left:8px;
    }
    .tab li a{
    background-color:#CCFFCC;
    border:1px solid #66CC66;
    color:#666;
    display:block;
    margin-bottom:-1px;
    padding:0 5px;
    line-height:20px;
    float:left;
    font-weight:bold;
    text-decoration:none;
    }
    .tab li .current,
    .tab li a:hover{
    background-color:#fff;
    border-bottom:1px solid #fff;
    _position:relative;
    }
    .cont{padding:10px;border:1px solid #6c6;border-top:0;}
    </style>
</head>
<body>
    <div class="demo">
        <div id="demo2">
                    <ul class="tab clearfix">
                        <li><a href="#" class="current">Tab One</a></li>
                        <li><a href="#">Tab Two</a></li>
                        <li><a href="#">Tab Three</a></li>
                        <li><a href="#">Tab Four</a></li>
                    </ul>
                </div>
        <div class="cont">荒涼的曠野，一群暴虐的劫匪正在鞭撻一位美麗的姑娘瑪麗亞（蘿蕾丹娜·卡波萊特 Loredana Cappelletti飾）。幸得迪亞戈（弗蘭科·尼羅 Franco Nero飾）的解救。他神秘而冷峻，拖著一副棺材漫步在泥濘的荒野上。迪亞戈帶著瑪麗亞來到荒涼的小鎮，人們對他的到來充滿好奇，更對這副棺材裡隱藏的秘密而惶惶不安。</div>
    </div>
</body>
</Html>

三、兩列流式布局；

固定寬度的布局so easy,配合浮動輕松搞定兩列自適應布局，三列同理。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>negative margin 之兩列自適應布局</title>
    <style>
    *{list-style:none;margin:0;padding:0;font-size: 12px;}
    .goback{clear:both;height:30px;line-height:30px;text-align: center;}
    
    .layout{width:960px;margin:0 auto;background:#f5f5f5;}
    .main{float:left;width:100%;height:300px;margin:0 -200px 0 0;background:#ccc;}
    .main-wrap{margin:0 210px 0 0;}
    .aside{float:left;width:200px;height:300px;background:#f5f5f5;}
    </style>
</head>
<body>
    <div class="layout">
        <div class="main">
            <div class="main-wrap">main</div>
        </div>
        <div class="aside">aside</div>
    </div>
</body>
</Html>

四、去除多余的外邊距；

圖文混排，每行最後一個元素的margin值如何處理？單獨設置類名消0？通過父層來裁切？使用margin負值吧！

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>negative margin 之去除多余外邊距</title>
    <style>
    *{list-style:none;margin:0;padding:0;font-size: 12px;}
    .clearfix:after {
    clear: both;
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
    content: "";
}
    .clearfix {*zoom:1;}
    .goback{clear:both;height:30px;line-height:30px;text-align: center;}
    
    .demo{width:320px;margin:0 auto;padding:10px 0;*overflow:hidden;background:green;}
    .figure-list{margin:0 -10px 0 0;}
    .figure-list li{float:left;width:100px;height:100px;margin:0 10px 10px 0;background:#f5f5f5;}
    </style>
</head>
<body>
    <div class="demo">
        <ul class="figure-list clearfix">
            <li>item-1</li>
            <li>item-2</li>
            <li>item-3</li>
            <li>item-4</li>
            <li>item-5</li>
            <li>item-6</li>
        </ul>
    </div>
</body>
</Html>

CSS詳解

網頁制作有用資料:網頁常用英文字體: CSS中對文字的控制在webjx.com中有過不少的介紹，但關於字體的還沒有。今天向大家介紹一些英
加了important標記css樣式的jQuery寫法: 代碼如下:display: block!important;//頁面上是這樣寫的 //修改的話,這
CSS基礎教程:群組化選擇器: 常常我們的CSS 樣式中會有好幾個地方需要使用到相同的設定時，一個一個分開寫會是一件滿累人的工作，

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

小編推薦

用CSS制作具有親和力的表格 CSS實現背景透明，文字不透明，兼容所有浏覽器 CSS定位屬性做程序經常有html與asp的代碼互換 webkit下text-indent首行縮進文字問題認識CSS，了解CSS作用 DIV+CSS在IE6、IE7、Firefox下的使用技巧(4) CSS實例:Google Adsense代碼廣告投影效果 html教程:pre標記裡內容自動換行 CSS clear屬性給float帶來哪些影響

DIV CSS 佈局教程網

一、三欄顯示（無需浮動及額外標簽）;

三、兩列流式布局；

四、去除多余的外邊距；

相關文章