負margin技術原理與運用 | CSS

時間 2020-07-10

標籤 margin 技術原理運用 css 欄目 CSS 简体版

原文原文鏈接

在CSS中，margin的值能夠是正數，也能夠是負數。
當margin爲負數的時候，對普通文檔流元素和對浮動元素的影響是不同的。瀏覽器

負`margin`的兩種狀況

當元素的margin-top或者margin-left爲負數時，「當前元素」會被拉向指定方向。
當元素的margin-bottom或者margin-right爲負數時，「後續元素」會被拉向指定方向。

咱們來看看下面的例子：bash

<style>
  .container div {
    width: 300px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #fff;
  }
  .first { background-color: red; }
  .second { background-color: purple; }
  .third { background-color: blue; }
</style>
<div class="container">
  <div class="first">1</div>
  <div class="second">2</div>
  <div class="third">3</div>
</div>
複製代碼

`margin-top`和`margin-left`舉例

當元素的margin-top或者margin-left爲負數時，「當前元素」會被拉向指定方向。ide

此時咱們將第2個div的margin-top進行設置：.second { margin-top: -30px; }，效果以下：佈局

能夠看到，當前元素（第2個div）被拉向top方向30px，而且覆蓋了div1。

若是是margin-left同理（能夠理解爲上圖逆時針旋轉90°），將第2個div設置爲：.second { margin-left: -30px; }，效果以下：ui

當前元素（第2個div）被拉向tleft方向30px，而且覆蓋了div1。

`margin-bottom`和`margin-right`舉例

當元素的margin-bottom或者margin-right爲負數時，「後續元素」會被拉向指定方向。spa

咱們試着將第2個div的margin-bottom進行設置：.second { margin-bottom: -30px; }，效果以下：設計

能夠看到後續元素（即第2個div）被拉向上一個元素（即第2個div）的方向，且覆蓋了上一個元素。 margin-right也同樣：

運用場景

瞭解了負margin的規則，咱們來聊聊具體使用的場景。
比較經常使用的技巧有：3d

圖片與文字對齊
自適應兩列布局
元素垂直居中
tab選項卡

圖片與文字對齊

當圖片與文字排在一塊兒的時候，在底部水平方向上每每都是不對齊的。如：code

<img src="./icon.png" alt="icon">這是一個圖標
複製代碼

這是由於，圖片與文字默認是基線對齊（vertical-align:baseline;）。cdn

若是想要實現圖片與文字底部水平方向對齊，除了使用vertical-align:text-bottom;這個方法以外，還可使用兼容性比較好的負margin來實現：margin-bottom: -3px;，效果以下：

這個3px正是文本中baseline和bottom的距離。

自適應兩列布局

自適應兩列布局一般指的是一列寬度固定，另外一列寬度自適應的佈局方式。利用負margin技術能夠很好地實現這種佈局。

<style>
  div {
    float: left;
    color: #fff;
    height: 500px;
  }
  .siderBar {
    width: 200px;
    background-color: purple;
  }
  .content {
    width: 100%;
    margin-right: -200px;
    background-color: plum;
  }
</style>
<body>
    <div class="siderBar">側邊欄，寬度固定200px</div>
    <div class="content">內容區，寬度自適應</div>
</body>
複製代碼

這時候改變瀏覽器的寬度，能夠看出右側內容區能夠自動適應瀏覽器。

元素垂直居中

用負margin+position:absolute能夠實現block元素、inline元素以及inline-block元素的垂直居中。

.father {
    position: relative; // 控制子元素在父元素以內
    width: 500px;
    height: 500px;
    background-color: cornflowerblue;
}
.son {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px; // 元素height一半的負數
    margin-left: -50px; // 元素
    width: 100px;
    height: 200px;
    background-color: white;
}
複製代碼

原理是：絕對定位的top: 50%; left:50%;只是定位了son元素左上角的點的位置，而margin-top和margin-left將本身拉回了寬高一半，將本身的中心點變成中心。

tab選項卡

利用負margin技術能夠實現選項卡的樣式設計。
以下代碼：

<style>
  ul, li {
    list-style: none;
  }
  .tab {
    width: 400px;
  }
  .tabHd {
    margin-bottom: -1px;
    padding: 0 10px 0 0;
    border: 1px solid #6c92ad;
    border-bottom: none;
    background: #eaf0fd;
    height: 28px;
  }
  .tabList {
    float: left;
    margin-left: -1px;
    padding: 0 15px;
    line-height: 28px;
    border-left: 1px solid #6c92ad;
    border-right: 1px solid #6c92ad;
    color: #005590;
    text-align: center;
  }
  .tabList.current {
    position: relative;
    background: #fff;
  }
  .tabBd {
    border: 1px solid #6c92ad;
  }
  .tabBd .roundBox {
    padding: 15px;
  }
  .tabContent {
    display: none;
  }
  .tabContent.current {
    display: block;
  }
</style>
複製代碼

<div id="tab" class="tab">
  <ul class="tabHd">
    <li class="tabList current">tab 1</li>
    <li class="tabList">tab 2</li>
    <li class="tabList">tab 3</li>
    <li class="tabList">tab 4</li>
  </ul>
  <div class="tabBd">
    <div class="roundBox">
      <div class="tabContent current">選項內容1</div>
      <div class="tabContent">選項內容2</div>
      <div class="tabContent">選項內容3</div>
      <div class="tabContent">選項內容4</div>
    </div>
  </div>
</div>
複製代碼

效果以下：

代碼中用到了兩個負margin，一個用於tabList，經過向右邊「拉」用來重疊每一個tab項的border。
另外一個用於tabHd，經過向上「拉」，而且設置當前選項的背景色爲白色，將選項內容覆蓋住當前選項的下border，而其他tab項因爲沒有設置背景色默認爲透明，因而不會被遮罩住。