css如何利用負margin技術(shù)實現(xiàn)平均布局
發(fā)布時間：2020-03-09 17:14:22 作者：Paulahu 
我要評論
我要評論這篇文章主要介紹了css如何利用負margin技術(shù)實現(xiàn)平均布局，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
我們平常會利用float布局來解決IE瀏覽器CSS的兼容性問題，比如淘寶，就是用float布局來實現(xiàn)的。 我們會在淘寶頁面會看到下圖這樣一種布局。
這種圖片均勻分布的布局我們叫平均布局，那這種布局又是怎么實現(xiàn)的呢？ 有的同學可能覺得，這還不簡單，可以直接設置父元素div寬度和子元素寬度總和相等就可以了。 真的有這么容易嗎，我們來試一下。
測試
假如我們令每個子元素寬度為100px，一共3個子元素，給每個子元素一個margin-right，設為50px，那父元素寬度應為100x3+50x2=400px。我們設置一些樣式。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)了 平均布局 。
結(jié)論
通過我們的測試，我們找到了解決平均布局的方案，希望能對大家有幫助。更多關于css平均布局的資料請關注腳本之家其它相關文章！
相關文章
css 布局 之 兩端布局的實例代碼 （利用父級負的margin）
這篇文章主要介紹了css 布局 之 兩端布局 （利用父級負的margin）的實例代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋2020-06-08- 這篇文章主要為大家詳細介紹了css布局之負margin妙用及其他實現(xiàn)的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
- 這篇文章主要介紹了CSS中使用負margin值來調(diào)整居中位置的方法,文中同時提到了這種常用方法的一些值得注意的地方,需要的朋友可以參考下2015-07-15
這篇文章主要介紹了css利用負margin實現(xiàn)平均布局的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起2020-11-03
