標籤頁-導航 負margin

 

/* 標籤頁菜單 */
div.bs-docs-example {
position: relative;
width: 600px;
margin: 15px auto;
padding: 39px 19px 14px;
background-color: white;
border: 1px solid #DDD;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

div.bs-docs-example::after {
content: "Example";
position: absolute;
top: -1px;
left: -1px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
background-color: #F5F5F5;
border: 1px solid #DDD;
color: #9DA0A4;
-webkit-border-radius: 4px 0 4px 0;
-moz-border-radius: 4px 0 4px 0;
border-radius: 4px 0 4px 0;
}

div.clear {
clear: both;
}

ul.nav-tabs {
border-bottom: 1px solid #DDD;
padding: 0;
margin: 0;
}

ul.nav-tabs li {
margin-bottom: -1px;
float: left;
line-height: 20px;
}

ul.nav-tabs li a {
display: block;
padding: 8px 12px;
line-height: 20px;
font-size: 14px;
color: #08C;
border: 1px solid transparent;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
padding-right: 12px;
margin-right: 2px;
}

ul.nav-tabs li a:hover {
background: #eee;
color: #005580;
}

ul.nav-tabs li.active a:hover,ul.nav-tabs li.active a:focus {
color: #555;
cursor: default;
background-color: white;
border: 1px solid #DDD;
border-bottom-color: transparent;
}

<!-- 標籤頁菜單 -->
<div class="bs-docs-example">
<ul class="nav-tabs">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">profile</a></li>
<li><a href="#">messages</a></li>
<div class="clear"></div>
</ul>
</div>

 

*****

一個完整的margin屬性是這麼寫的margin: top right bottom left;(eg: margin:10px 20px 30px 40px)。在margin屬性中一共有兩類參考線，top和left的參考線屬於一類，right和bottom的參考線屬於另外一類。top和left是之外元素爲參考，right和bottom是以元素自己爲參考。margin的位移方向是指margin數值爲正值時候的情形，若是是負值則位移方向相反。

 

上面段文字和圖片或許挺難理解，咱們來看實際代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> < title >Margin參考線舉例說明</ title > < style type = "text/css" > *{margin:0; padding:0;} .wrap{width:400px; border:5px solid #aaa;} .example{width:200px; height:200px; background:#CCCCFF;} .normal{width:200px; height:200px; background:#CCE8CF;} /* 添加或者註釋掉下面的margin屬性，查看先後差異 .example{margin:-10px 20px -30px 40px;} */ </ style > </ head > < body > < div class = "wrap" >    < div class = "example" >example元素：margin參考線舉例說明文字，請查看此元素因爲margin的變化所移動的位移量。</ div >    < div class = "normal" >一個普通的Box</ div > </ div > </ body > </ html >

來分析這段代碼，example元素下方有一相鄰元素normal（注：這裏分析的是添加和刪除margin後的example元素，normal元素僅做爲example元素先後效果的參照）。

根據上文的參考線原理margin:-10px(top) 20px(right) -30px(bottom) 40px(left); 上-10px和左40px將之外元素爲參考，所謂外元素就是本元素的邊界元素（再白話點的解釋就是元素的緊鄰元素，這裏涉及到containing block知識，可自行網上搜索）。example元素上邊和左邊的邊界元素即爲wrap父元素，wrap父元素爲基準點，example的margin-top爲-10px，想象下若是這裏margin-top爲+10px會什麼狀況，沒錯若是爲+10px，example元素相對於wrap父元素邊緣爲基準，那麼example元素會同wrap父元素10px產生間隙邊距，那麼反過來，margin-tip:-10px;仍是與wrap父元素邊緣爲基準，反過來向上推10px的距離位置。example元素的margin-left爲40px，這裏就按照正常邏輯相隔40px邊距，同理若是爲-40px，那麼就是反方向向左推動40px的距離位置。

再來看example元素的margin-right和margin-bottom，由上文得知這倆個值是以元素自己爲參考。什麼叫以元素自己爲參考呢，確切含義是指以自身爲參考來影響周圍元素的位置（實質即爲影響下邊和右邊相鄰元素的參考線）。這裏的margin-bottom爲-30px，對於其自身位置沒有任何變化，可是對於其下方元素normal元素產生了極大的影響，由於normal元素的上邊界元素即爲example元素，根據example元素邊界來斷定自身位置，想象下若是example元素margin-bottom爲+30px，那麼example元素將隔開下方的normal元素，反之爲-30px，下方normal元素因爲example參考線內凹，致使了normal元素自個兒身不禁己的被「提」了上去了。這就是以自身爲參考影響周圍元素位置的含義。

這裏梳理一下規律，當margin四個值都爲正數值的話，那麼margin按照正常邏輯同周圍元素產生邊距。當元素margin的top和left是負值時會引發元素的向上或向左位置移動。而當元素margin的bottom和right是負值時會影響右邊和下邊相鄰元素的參考線。若是你再想深刻了解參考線理論的話你也可訪問由淺入深漫談margin屬性這篇文章。

負margin實戰：

據我所知至今沒有一套完整的關於負margin專題研究的文章。有也僅僅是偏理論或者偏實例，理論終究是理論，學以至用纔是根本，而有了實例你還得知曉原理，授人魚不如授人以漁。接下來咱們將利用四個例子深刻講解負margin技術的應用領域。

負margin在Tab選項卡中的應用：

效果預覽：

 

這是第四個選項卡的內容，據我所知至今沒有一套完整的關於負margin專題研究的文章。有也僅僅是偏理論或者偏實例，理論終究是理論，學以至用纔是根本，而有了實例你還得知道其原理，授人魚不如授人以漁。這些都是文字文字文字文字文字。

 

核心分析：

如上面的這個Tab選項卡效果，最核心的就是下方倆行高亮部分代碼，第二行的margin-bottom:-1px;使下方的正文部分向上「提」了1px的距離，從而達到了鼠標上移後選項卡白色遮住下方黑色邊框的效果（注：因爲IE不是符合W3C標準，因此當鼠標移到選項卡上時須要添加一個額外屬性position:relative;來修復IE不覆蓋下方邊框的這個Bug）。第四行的margin-left:-1px;的目的是讓四個選項卡向左移動1px的距離，達到左右都只有一條分割線的效果。

CSS代碼：

1 2 3 4 5 6 7 8 9

.demoTab{ width : 400px ; font : 14px / 1.5 Microsoft YaHei, verdana , Helvetica , Arial , sans-serif ;} .demoTab .demoTabHd{ margin-bottom : -1px ; border : 1px solid #6C92AD ; border-bottom : none ; background : #EAF0FD ;} .demoTab .demoTabNav{ height : 28px ; overflow : hidden ; *zoom: 1 ;} .demoTab .demoTabList{ float : left ; margin-left : -1px ;  padding : 0 22px ; line-height : 28px ; border-left : 1px solid #6C92AD ; border-right : 1px solid #6C92AD ;  font-weight : bold ; color : #005590 ; text-align : center ; cursor : pointer ;} .demoTab .demoTabList.current{ position : relative ; background : #fff ;} .demoTab .demoTabBd{ border : 1px solid #6C92AD ;} .demoTab .demoTabBd .roundBox{ padding : 15px ;} .demoTab .demoTabContent{ display : none ;} .demoTab .demoTabContent.current{ display : block ;}

HTML代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

< div id = "demoTab" class = "demoTab" >    < div class = "demoTabHd" >      < ul class = "demoTabNav clearfix" >        < li class = "demoTabList current" >前端</ li >        < li class = "demoTabList" >實戰</ li >        < li class = "demoTabList" >交互</ li >        < li class = "demoTabList" >優化</ li >      </ ul >    </ div >    < div class = "demoTabBd" >      < div class = "roundBox" >        < div class = "demoTabContent current" >這是第一個選項卡的內容。</ div >        < div class = "demoTabContent" >這是第二個選項卡的內容。</ div >        < div class = "demoTabContent" >這是第三個選項卡的內容。</ div >        < div class = "demoTabContent" >這是第四個選項卡的內容。</ div >      </ div >    </ div > </ div >

負margin負位移技術應用：

效果預覽：

 

核心分析：

上面那個相似於商城熱銷商品郵戳效果其實也是由負margin實現的，把以往使用的relative/absolute這樣的「危險」屬性代替爲相對「溫和」的margin屬性。核心在於小的郵戳圖片利用負margin-top向上移動，達到相似absolute的疊加效果。

CSS代碼：

1 2 3 4

.demoSpecItem{ width : 212px ; min-height : 178px ; _height : 178px ;} .demoSpecItem .demoItemPic{ display : block ; text-align : center ;} .demoSpecItem .demoItemPic img{ padding : 5px ; border : 1px solid #ccc ;} .demoSpecItem .demoIcon{ display : block ; margin : -185px 0 0 150px ;}

HTML代碼：

1 2 3 4 5 6

< div class = "demoSpecItem" >    < a href = "javascript:void(0)" class = "demoItemPic" >      < img width = "200" height = "166" src = "toygersKittens.jpg" alt = "toygers kittens" />    </ a >    < span class = "demoIcon" >< img width = "54" height = "54" src = "buyInSoon.png" alt = "icon" /></ span > </ div >

利用負margin製做鱗片式導航：

效果預覽：

 

 

核心分析：

鱗片式導航能夠說是使用負margin技術最佳場合之一。如上方的例子，試着想象不使用負margin，單純的使用圖片來製做這類鱗片式導航，想象下切圖、定位、點擊後圖片切換、中間接壤部分的遮罩、維護開發的工做量，光想一想這些就毛骨悚然。而利用負margin這裏僅僅添加一個margin-left便可達到先後遮蓋的效果。

CSS代碼：

1 2 3 4 5 6

.demoNav .demoList{ float : left ; width : 154px ; height : 53px ; margin : 0 0 0 -20px ;} .demoNav .demoList.firstList{ margin : 0 ;} .demoNav .demoList a{ display : block ; line-height : 53px ; padding : 0 0 0 25px ; color : #005590 ; background : url ( "flakeNavTab.png" ) left top no-repeat ; font-weight : bold ; text-decoration : none ;} .demoNav .demoList a:hover{ background : url ( "flakeNavTabHover.png" ) left top no-repeat ;} .demoNav .demoList.current a{ background : url ( "flakeNavTabCurrent.png" ) left top no-repeat ;} .demoNav .demoList.current a:hover{ background : url ( "flakeNavTabCurrent.png" ) left top no-repeat ;} /* fix ie6 hover issue */

HTML代碼：

1 2 3 4 5 6 7 8

< div id = "demoNav" class = "demoNav" >    < ul class = "clearfix" >      < li class = "demoList firstList current" >< a href = "javascript:void(0)" >鱗片導航</ a ></ li >      < li class = "demoList" >< a href = "javascript:void(0)" >前端開發</ a ></ li >      < li class = "demoList" >< a href = "javascript:void(0)" >用戶體驗</ a ></ li >      < li class = "demoList" >< a href = "javascript:void(0)" >實戰爲主</ a ></ li >    </ ul > </ div >

利用負margin製做自適應左右佈局：

效果預覽：

負margin可以替代float浮動佈局，進行左右佈局規劃，而且擁有float所沒有的自適應效果。你能夠嘗試點擊變寬和變窄按鈕來查看本例。現現在，負margin技術的應用可謂愈來愈廣，任一個大型站點驚鴻一瞥之下都會有其身影所在。

 

 

核心分析：

如上例這類佈局效果（左邊一個固定圖片，右邊爲內容），負margin可以替代float浮動佈局，進行左右佈局規劃，而且擁有float所沒有的自適應效果。你能夠嘗試點擊變寬和變窄按鈕來查看本例。你或許也發現了第三個「不設置最小寬度」按鈕，這個是作什麼用的呢？你能夠使用標準瀏覽器查看上方例子，依次點擊變寬按鈕至寬度最大，再點擊不設置最小寬度按鈕，你會發現出現了一個Bug。負margin用做佈局效果的確有其獨到之處，但自身也有一個小的缺陷，即若是內部最後一個子元素使用負margin上移後，因爲父元素是其邊距元素，其實際高度因爲內部子元素上移也會跟着變小。解決方式就是設置一個最小高度，最小高度值爲較小的固定元素高度（此例即爲左邊固定的圖片高度），就可完全解決負margin上移影響父元素高度Bug。

CSS代碼：

1 2 3 4 5

.demoLayout{ width : 500px ; border : 1px solid #aaa ; background : #EEEEEE ;} .demoLayout .roundBox{ padding : 10px ; min-height : 170px ; _height : 170px ;} .demoLayout .demoShowPic img{ padding : 1px ; border : 1px solid #DAA520 ;} .demoText{ margin : -170px 0 0 215px ;} .demoLayoutBtn{ margin : 15px 0 0 0 ;}

HTML代碼：

1 2 3 4 5 6

< div id = "demoLayout" class = "demoLayout" >    < div class = "roundBox" >      < div class = "demoShowPic" >< img width = "200" height = "166" src = "toygersKittens.jpg" alt = "toygers kittens" /></ div >      < div class = "demoText" >利用負margin製做自適應左右佈局</ div >    </ div > </ div >