這篇文章主要介紹了CSS布局的實(shí)用小技巧之margin負(fù)值的示例,具有一定借鑒價(jià)值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
在涼城等地區(qū),都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局,加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力,以專注、極致的服務(wù)理念,為客戶提供成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作按需制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站建設(shè),網(wǎng)絡(luò)營銷推廣,外貿(mào)營銷網(wǎng)站建設(shè),涼城網(wǎng)站建設(shè)費(fèi)用合理。負(fù)邊距即margin屬性的值設(shè)為負(fù)值,在CSS布局中時(shí)一個(gè)很有用的技巧。值為正的場景很常見,大家都很熟悉其表現(xiàn)
當(dāng)margin-top、margin-left為負(fù)值的時(shí)候,會(huì)把元素上移、左移,同時(shí)文檔流中的位置也發(fā)生相應(yīng)變化,這點(diǎn)與position:relative的元素設(shè)置top、left后元素還占據(jù)原來位置不同
當(dāng)margin-bottom、margin-right設(shè)為負(fù)值的時(shí)候,元素本身沒有位置變化,后面的元素會(huì)下移、右移
看幾個(gè)應(yīng)用場景
絕對(duì)定位元素
當(dāng)元素被設(shè)置為絕對(duì)定位的時(shí)候其top、right、bottom、left值是指離最近的非static元素的距離,經(jīng)典的垂直居中的一種方式正是利用的絕對(duì)定位元素的負(fù)邊距實(shí)現(xiàn)的
<style> .wrap4{ position:relative; margin:10px; width:200px; height:200px; border:dashed 1px orange; } .wrap4 .content{ position:absolute; width:100px; height:100px; top:50%; left:50%; margin-top:-50px; margin-left:-50px; background:orange; } </style> <div class="wrap4"> <div class="content"></div> </div>
把元素設(shè)置為絕對(duì)定位,然后設(shè)置top和left為50%,這時(shí)候元素的上邊、左邊就到了父元素的50%處,再對(duì)元素設(shè)置其自身高度、長度一般的負(fù)邊距,使元素中心移動(dòng)到父元素中心,實(shí)現(xiàn)居中對(duì)齊
float元素
負(fù)邊距對(duì)float元素的影響也是按照上面說的,不過有其特殊性,我們看個(gè)例子就很清楚了
浮動(dòng)元素負(fù)邊距
<style> .float{ overflow:hidden; width:280px; border:dashed 1px orange; } .float .item{ width:100px; height:100px; float:left; } .float .item:nth-child(1){ background:red; } .float .item:nth-child(2){ background:grey; } .float .item:nth-child(3){ background:blue; } </style> <div class="float"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
在一個(gè)寬度為280px的div中右3個(gè)float:left的子元素,寬度為100px,由于一排放不下,最后一個(gè)陪移動(dòng)到了下一行
我們對(duì)代碼稍作修改
<style> .float{ overflow:hidden; width:280px; border:dashed 1px orange; } .float .item{ width:100px; height:100px; float:left; } .float .item:nth-child(1){ background:red; } .float .item:nth-child(2){ background:grey; } .float .item:nth-child(3){ background:blue; margin-left:-20px; } </style> <div class="float"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
第三個(gè)元素添加-20px的負(fù)邊距
這時(shí)候發(fā)現(xiàn)第三個(gè)元素移上去了,并且覆蓋了第二個(gè)元素20px,經(jīng)典的多列布局正是利用此原理
多列布局
<style> .body{ width:500px; margin:10px; border:dashed 1px orange; overflow:hidden; } .wrap3{ float:left; width:100%; } .wrap3 .content{ height:200px; margin-right:100px; background:rgba(255,0,0,0.5); } .body .right{ width:100px; height:200px; float:left; margin-left:-100px; background:rgba(0,255,0,0.5) } </style> <div class="body"> <div class="wrap3"> <div class="content"> Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content </div> </div> <div class="right">Right</div> </div>
代碼很簡單
為content元素添加父元素,設(shè)置左浮動(dòng),寬度100%
content元素設(shè)置右邊距,值等于right的寬度
right左浮動(dòng),然后設(shè)置其寬度的負(fù)邊距
本來right應(yīng)該在第二行顯示了,但是其寬度的左浮動(dòng)使它到了第一行的最右邊,覆蓋了wrap的一部分,但是content有right寬度的右邊距,覆蓋區(qū)域沒有內(nèi)容,這樣就實(shí)現(xiàn)了兩列布局
普通元素
負(fù)邊距對(duì)不同塊元素的影響很有意思,我們通過幾個(gè)例子來看一下
多列列表
<style> li{ line-height:2em; } .col2{ margin-left:150px; } .col3{ margin-left:300px; } li.top{ margin-top:-9em; } </style> <ul> <li class="col1">aaa</li> <li class="col1">bbb</li> <li class="col1">ccc</li> <li class="col2 top">ddd</li> <li class="col2">eee</li> <li class="col2">fff</li> <li class="col3 top">ggg</li> <li class="col3">hhh</li> <li class="col3">iii</li> </ul>
普通的做法我們肯定是通過浮動(dòng)實(shí)現(xiàn),通過剛才介紹的知識(shí)應(yīng)該不難理解為什么這樣也行。看起來在普通元素上沒什么稀奇的
放大元素
什么?負(fù)邊距還可以放大元素?。?!
<style> .wrap{ width:300px; border:dashed 5px orange; } .wrap .inner{ height:50px; margin:0 -50px; background:blue; opacity:0.5; } </style> <div class="wrap0"> <div class="inner0"> inner inner inner inner inner inner inner inner inner inner inner inner </div> </div>
這個(gè)例子看起來平淡無奇,效果卻很驚人,內(nèi)層的div設(shè)置了水平的負(fù)邊距后竟然變大了
PS. 效果能實(shí)現(xiàn)的前提是元素的寬度不能設(shè)置為auto以外的值
帶有右邊距的浮動(dòng)子元素列表
看到這種效果你第一想法是什么?會(huì)不會(huì)是子元素設(shè)置margin-right,在遍歷的時(shí)候nth-child(3n)還要設(shè)置為0,看看利用上面知識(shí)我們可以怎樣處理
<style> .wrap2{ width:320px; border:dashed 1px orange; } .wrap2 .inner{ overflow:hidden; margin-right:-10px; } .wrap2 .item{ float:left; width:100px; height:100px; margin:10px 10px 10px 0; background:blue; } </style> <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>
我們沒有設(shè)置nth-child(3n)的邊距為0,而是通過負(fù)邊距使父元素“變大”。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享CSS布局的實(shí)用小技巧之margin負(fù)值的示例內(nèi)容對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司,,關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,遇到問題就找創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司,,詳細(xì)的解決方法等著你來學(xué)習(xí)!
本文題目:CSS布局的實(shí)用小技巧之margin負(fù)值的示例-創(chuàng)新互聯(lián)
標(biāo)題URL:http://muchs.cn/article44/dhcoee.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App設(shè)計(jì)、外貿(mào)建站、網(wǎng)站排名、網(wǎng)站改版、做網(wǎng)站、域名注冊(cè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容