css怎么利用負margin技術(shù)實現(xiàn)平均布局

這篇文章給大家分享的是有關(guān)css怎么利用負margin技術(shù)實現(xiàn)平均布局的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

我們平常會利用float布局來解決IE瀏覽器CSS的兼容性問題，比如淘寶，就是用float布局來實現(xiàn)的。 我們會在淘寶頁面會看到下圖這樣一種布局。

這種圖片均勻分布的布局我們叫平均布局，那這種布局又是怎么實現(xiàn)的呢？ 有的同學可能覺得，這還不簡單，可以直接設(shè)置父元素div寬度和子元素寬度總和相等就可以了。 真的有這么容易嗎，我們來試一下。

測試

假如我們令每個子元素寬度為100px，一共3個子元素，給每個子元素一個margin-right，設(shè)為50px，那父元素寬度應(yīng)為100x3+50x2=400px。我們設(shè)置一些樣式。html和css代碼如下。

//HTML
<div class="father clearfix">
   <div class="son"></div>
   <div class="son"></div>
   <div class="son"></div>
</div>

//CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.father {
  width: 400px;
  height: 100px;
  margin: 10px;
  background-color: #d5a4cf;
  border: 1px solid black;
}

.son {
  border: 1px solid black;
  background-color: #fff1ac;
  float: left;
  margin-right: 50px;
  width: 100px;
  height: 100px;
}

此時效果如下

我們發(fā)現(xiàn)最后一個子元素被擠下來了，這是為什么呢。不要問為什么，因為這就是CSS。 那我們該怎么解決呢，有的同學說，是受父元素的1px的border影響，我們把換成outline試一下。

我們發(fā)現(xiàn)還是沒有起作用，這個時候怎么辦呢。接下來給大家介紹一種“負margin”的方法。 我們給父元素和子元素間加一個中間層，令這個div的margin-right為-50px，我們再來試一下。

//HTML
<div class="father clearfix">
  <div class="middle clearfix">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
  </div>
</div>

//CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.father {
  width: 400px;
  height: 100px;
  margin: 10px;
  background-color: #d5a4cf;
  outline: 1px solid black;
}

.son {
  border: 1px solid black;
  background-color: #fff1ac;
  float: left;
  margin-right: 50px;
  width: 100px;
  height: 100px;
}

.middle {
  margin-right: -50px;
}

這個時候我們發(fā)現(xiàn)，中間的div通過“延伸”右外邊距把帶三個子元素“包進去”了，從而實現(xiàn)了 平均布局 。

感謝各位的閱讀！關(guān)于“css怎么利用負margin技術(shù)實現(xiàn)平均布局”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！