css margin負邊距之列布局（列表、聖盃、雙飛翼）
技術服務於應用，技術來源於應用。css
應用1：當接到設計師給的設計圖時（以下圖），發現每列左右和上下文保持一致，頓時整個心情就很差了。由於要兼顧響應式，即沒辦法保證每一個列表單元的具體位置，是列表中間仍是邊緣，邊緣兩個要保證（左或右）內外邊距爲零，沒法得到理想佈局，綜合屢次搜索，獲得解決辦法：html
*** 增長列表區域寬度，margin設爲負值。web
原理相信有css基礎的道友都清楚（負邊距不只能影響元素在文檔流的位置，還能增長元素的寬度），父元素向右增長寬度（margin負值）與列表元素右邊距相等，因使用的是bootstrap框架，列表元素默認padding15px，想要實現效果圖,就須要覆蓋樣式，將內邊距重寫爲0，而後使用margin設置邊距。代碼以下：bootstrap
代碼以下：div瀏覽器
<div class="tab-content lists">
<div class="tab-pane active" id="Ordinal">
<div>
<div class="website-list col-lg-3 col-md-3 col-sm-4 col-xs-6">
<div class="website-products">
<div >
<div class="website-span">
<span>Collating sequence:</span>
<input type="text" />
</div>
</div>
<img class="img-responsive" src="../img/person/products.png" />
<div><span>SupFire Bright USB waterproof outdoor lighting mountain bike</span></div>
</div>
</div>
<div class="website-list col-lg-3 col-md-3 col-sm-4 col-xs-6">
<div class="website-products">
<div >
<div class="website-span">
<span>Collating sequence:</span>
<input type="text" />
</div>
</div>
<img class="img-responsive" src="../img/person/products.png" />
<div><span>SupFire Bright USB waterproof outdoor lighting mountain bike</span></div>
</div>
</div>
<div class="website-list col-lg-3 col-md-3 col-sm-4 col-xs-6">
<div class="website-products">
<div >
<div class="website-span">
<span>Collating sequence:</span>
<input type="text" />
</div>
</div>
<img class="img-responsive" src="../img/person/products.png" />
<div><span>SupFire Bright USB waterproof outdoor lighting mountain bike</span></div>
</div>
</div>
<div class="website-list col-lg-3 col-md-3 col-sm-4 col-xs-6">
<div class="website-products">
<div >
<div class="website-span">
<span>Collating sequence:</span>
<input type="text" />
</div>
</div>
<img class="img-responsive" src="../img/person/products.png" />
<div><span>SupFire Bright USB waterproof outdoor lighting mountain bike</span></div>
</div>
</div>
<div class="website-list col-lg-3 col-md-3 col-sm-4 col-xs-6">
<div class="website-products">
<div >
<div class="website-span">
<span>Collating sequence:</span>
<input type="text" />
</div>
</div>
<img class="img-responsive" src="../img/person/products.png" />
<div><span>SupFire Bright USB waterproof outdoor lighting mountain bike</span></div>
</div>
</div>
</div>
</div>框架
主要CSS：佈局
.website-list{
padding: 0px 39px 39px 0px;
}
.lists{
margin-right: -39px;
}優化
應用2：經典佈局聖盃佈局和雙飛翼佈局：spa
相同點：：佈局要求：主題部分三列，左右兩欄固定寬度，中間部分自適應。設計
不一樣點：：解決「中間欄div內容不被遮擋」問題的方法不一樣。聖盃佈局,將中間欄元素設置padding left right後，將左右兩個div用相對佈局position:relative；配合right和left屬性，以便不遮擋中間div，雙飛翼佈局,在中間div內部建立div，設置子div的margin left right屬性，爲兩邊div留下位置。
聖盃佈局-原理：
一、將middle首先放在container的子元素第一個，而後是left，right,同時設置三者float:left；
二、middle要自適應，須要設置width:100%；讓left部分和middle處於一行，要是用margin-left:-100%;
三、此時left部分會遮蓋middle的內容，將middle部分收縮起來，設置其父元素container內邊距，padding：0 200px;
四、left部份內容隨同middle收縮，佔據middle一部分，須要設置left部分使用相對定位，獨立於middle，left:-200px;
五、同理right部分放置middle右部分，須要設置其相對定位、寬度和margin-left、right值。
代碼以下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聖盃佈局</title>
<style>
body{
margin:auto;
text-align: center;
}
.container{
overflow: hidden;
margin:10px 0;
padding: 0 200px;
}
.left{
float: left;
position: relative;
margin-left: -100%;
left: -210px;
width: 200px;
background-color:grey;
}
.middle{
float: left;
width: 100%;
background-color: red;
}
.right{
right: -210px;
margin-left: -200px;
width: 200px;
float: left;
position: relative;
background-color: grey;
}
</style>
</head>
<body>
<div class="container">
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
雙飛翼-原理：
一、將middle首先放在container的子元素第一個，而後是left，right,同時設置三者float:left；
二、middle要自適應，須要設置width:100%；讓left部分和middle處於一行，要是用margin-left:-100%;，right使用margin-left:-190px;
三、此時middle的內容被覆蓋，要把middle的內容拉出來，除了使用外圍container的padding，還能夠考慮使用margin，給middle增長一個內層div -- middle_content, 而後設置 margin:0 200px
實現代碼：
<!DOCTYPE HTML>
<html >
<head>
<meta charset="UTF-8">
<title>雙飛翼佈局</title>
<style type="text/css">
body {
text-align: center;;
}
.container {
overflow: hidden;
margin: 10px 0;
}
.left {
background-color: red;
float:left;
width:190px;
margin-left: -100%;
}
.right {
background-color: green;
width: 190px;
float: left;
margin-left: -190px;
}
.middle {
float: left;
width: 100%;
}
.middle-content {
background-color:grey;
margin: 0 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="middle">
<div class="middle-content">
middle-content
</div>
</div>
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
</body>
</html>
優化：當縮小放大瀏覽器界面時，左右盒子寬度不變，中間是自適應的，但當界面太窄時，就會出現顯示問題，爲大盒子（container）這是最小寬度，當界面小於最小寬度時，中間寬度不變，出現橫向滾動。
-
每一个你不满意的现在，都有一个你没有努力的曾经。