margin為負值對佈局的影響

lakey0126發表於2018-08-16

一、對自身的影響

當元素不存在width屬性或者width: auto時，負值margin會增加元素的寬度，例子如下：

<div class="container">
  <div class="box1">
         沒有設定寬度
    </div>
</div>
複製程式碼
.container{
        margin:0 auto;
        width: 200px;
        border: 1px #ccc solid;
        margin-bottom: 20px;
}
.box1{
    margin-left: -20px;
}複製程式碼

margin為負值對佈局的影響

margin為負值對佈局的影響

可以看到box1增加了20px寬度，父元素".container"沒有增寬（多出的寬度是邊框寬度）。margin-left、margin-right都可以增加寬度。

那接下來我們看看margin-top和margin-bottom的情況：

#box { 
width: 50%; 
margin-bottom: -25px; 
background-color: rgba(90, 243, 151, 0.8); 
height: 50px; 
} 複製程式碼
<div id="box"> box </div>
<script src="http://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> 
<script> 
var x = $('#box').height() console.log(x); 
</script>複製程式碼

margin為負值對佈局的影響

margin-top為負值不會增加高度，只會產生向上位移
margin-bottom為負值不會產生位移，會減少自身的供css讀取的高度

二、對文件流的影響

margin為負值對佈局的影響

設定margin-left: -40px;後：

margin為負值對佈局的影響

margin為負值對佈局的影響

設定margin-left: -40px;後：

margin為負值對佈局的影響

可以看出，元素如果用了margin-left:-40px;元素會向左偏移20px，但和相對定位不同的是，在其後面的元素會補位，也就是後面的行內元素會緊貼在此元素的之後。總結，不脫離文件流不使用float的話，負margin元素是不會破壞頁面的文件流。

三、對浮動元素的影響

<div class="fl" id="box1">box1</div>
<div class="fl" id="box2">box2</div>
<div class="fl" id="box3">box3</div>複製程式碼
.fl{
	float: left;
	width: 100px;
	height: 100px;
}
#box1{background-color: rgba(255,255,0,.8);}
#box2{background-color: rgba(0,255,255,.8);}
#box3{background-color: rgba(255,0,0,.8);}複製程式碼

margin為負值對佈局的影響

給三個div都加上margin-left: -20px;

margin為負值對佈局的影響

可以看到三個盒子都先做移動了20px，box1向左移動20px，box2向左移動20px，所以我們只能看到60px的box1。

接下來只給box3新增margin-left:-200px;

margin為負值對佈局的影響

box3覆蓋了box1，顯示在box2的前面。

總結：負margin會改變浮動元素的顯示位置，即使我的元素寫在DOM的後面，我也能讓它顯示在最前面。

四、對絕對定位元素的影響

<div class="absolute"></div>複製程式碼
.absolute{ 
	position: absolute; 
	top:50%; left:50%; 
	height: 200px; 
	width: 200px; 
	background-color: #ccc; 
	margin-top: -100px; 
	margin-left: -100px; 
}複製程式碼


margin為負值對佈局的影響

對於絕對定位元素，負margin會基於其絕對定位座標再偏移。
唯有的缺點就是你必須知道這個覺得定位元素寬度的和高度才能並設定負margin值使其居中瀏覽器視窗。

若不確定寬度和高度，可以用

transform: translate3d(-50%,-50%,0); 複製程式碼

使用translate3d可以開啟GPU加速，就不用cpu去從新計算所有點素位置，開啟GPU加速後，GPU自動將這個元素放在一個新的“層”，直接偏移這個“層”來提高渲染速度。


相關文章