CSS布局的實(shí)用小技巧：margin負(fù)值

負(fù)邊距即margin屬性的值設(shè)為負(fù)值，在CSS布局中時(shí)一個(gè)很有用的技巧。值為正的場景很常見，大家都很熟悉其表現(xiàn)

成都創(chuàng)新互聯(lián)專注于尼瑪網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。熱誠為您提供尼瑪營銷型網(wǎng)站建設(shè)，尼瑪網(wǎng)站制作、尼瑪網(wǎng)頁設(shè)計(jì)、尼瑪網(wǎng)站官網(wǎng)定制、微信小程序定制開發(fā)服務(wù)，打造尼瑪網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供尼瑪網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

當(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ù)邊距使父元素“變大”。

負(fù)邊距是不是很有意思，不很了解的少年們學(xué)起來吧！

更多編程相關(guān)知識(shí)，請?jiān)L問：編程學(xué)習(xí)！！

標(biāo)題名稱：CSS布局的實(shí)用小技巧：margin負(fù)值
地址分享：http://www.muchs.cn/article0/cjjpio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、商城網(wǎng)站、標(biāo)簽優(yōu)化、網(wǎng)站導(dǎo)航、定制網(wǎng)站、搜索引擎優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容