欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css如何利用負(fù)margin技術(shù)實(shí)現(xiàn)平均布局

  發(fā)布時(shí)間：2020-03-09 17:14:22   作者：Paulahu   我要評(píng)論
這篇文章主要介紹了css如何利用負(fù)margin技術(shù)實(shí)現(xiàn)平均布局，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

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

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

測(cè)試

假如我們令每個(gè)子元素寬度為100px，一共3個(gè)子元素，給每個(gè)子元素一個(gè)margin-right，設(shè)為50px，那父元素寬度應(yīng)為100x3+50x2=400px。我們?cè)O(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;
}

此時(shí)效果如下

我們發(fā)現(xiàn)最后一個(gè)子元素被擠下來(lái)了，這是為什么呢。不要問(wèn)為什么，因?yàn)檫@就是CSS。 那我們?cè)撛趺唇鉀Q呢，有的同學(xué)說(shuō)，是受父元素的1px的border影響，我們把換成outline試一下。

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

//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;
}

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

 

結(jié)論

通過(guò)我們的測(cè)試，我們找到了解決平均布局的方案，希望能對(duì)大家有幫助。更多關(guān)于css平均布局的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論