CSS 負外邊距

admin發表於2018-09-10
CSS

margin屬性用來設定元素的外邊距，基本用法可以參閱CSS margin 外邊距一章節。

外邊距應用程式碼片段如下：

[CSS] 純文字檢視 複製程式碼
div {
  width:150px;
  height:150px;
  margin:10px 20px 30px 40px;
}

上述程式碼演示了給 div 設定 margin 外邊距，非常簡單。

當然也可以將 margin 外邊距值設定為負數，表面上看非常簡單直白。

程式碼片段如下：

[CSS] 純文字檢視 複製程式碼
margin-left:10px;
margin-left:-10px;

margin-left: 10px 可以將元素從原位置向右移動 10px。

那麼 margin-left: -10px 就是將元素向右移動 -10px，也就是向左移動 10px。

看上去非常簡單，很多初學者對於負外邊距的理解僅限於此，無非是外邊距的方位上的不同。

下面再來看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>螞蟻部落</title>
<style type="text/css">
#ant{
  width:300px;
  height:100px;
  background-color:red;
  margin-bottom:-40px;
}
</style>
</head>
<body>
<div id="ant"></div>
本站url地址是www.softwhy.com
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201809/10/123311jk8ooowotqw8fw9x.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼的執行表現是不是讓人很奇怪，主要有如下幾點：

（1）.設定 div 元素下外邊距為負數，但 div 元素位置沒有發生變化。

（2）.文字並非寫在 div 元素內，但文字卻在 div 元素之內顯示。

上面所有奇怪現象的都與負外邊距內在原理相關聯，下面進行一下詳細分析。

一.負外邊距對文件流的影響：

文件流規通俗的講是規定內容在文件中的繪製規則，具體可以參閱 CSS文件流通俗介紹 一章節。

如果上面程式碼沒有設定負外邊距，那麼 div 在上，文字內容在 div 的下方。

負外邊距可以對元素在文件流中佔據空間的邊界產生影響（準確的說不是負外邊距，而是外邊距），正外邊距能夠向外延伸元素佔據空間的邊界，負外邊距能回縮邊界，上面程式碼，div 原本佔據文件流空間回縮40px，後面文字填補它回縮的空間。

概念總結：處於文件流中的元素邊界是由外邊距所確定，外邊距為正，那麼邊界向外擴充套件，為負，邊界回縮。

再來看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>螞蟻部落</title>
<style type="text/css">
#box{
  width:200px;
  background-color:blue;
  overflow:hidden;
}
#ant{
  width:80px;
  height:100px;
  background-color:red;
}
</style>
<script>
window.onload=function(){
  let obt=document.getElementById("bt");
  let odiv=document.getElementById("ant");
  obt.onclick=function(){
    odiv.style.marginBottom="-40px";
  }
}
</script>
</head>
<body>
<div id="box">
  <div id="ant"></div>
</div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

在上面程式碼中，父元素高度自適應，它的子元素的高度是100px。

這時候點選按鈕，通過JavaScript設定子元素的下外邊距值為-40px，那麼子元素的在文件流所佔據的邊界會回退40px（邊界回退並不意味著它的高度減少），那麼父元素的高度變為60px。

特別說明：父元素新增overflow:hidden是為了啟用元素BFC，以此適應子元素所佔據的空間。

相關文章