1. 水平垂直居中
利用margin負值可以實現(xiàn)元素的水平垂直居中
html代碼：
<div class="box">
<div class="out">
<div class="content">水平垂直居中</div>
</div>
</div>
CSS代碼
.box {
position: relative;
width: 500px;
height: 500px;
background: #ddd;
}
.out {
position: absolute;
top: 50%;
left: 50%;
}
.content {
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
background: #aaccdd;
}
實現(xiàn)效果
image.png
2. 列表項兩端對齊
利用margin負值視覺上消除列表兩端的溢出
overflow：hidden;=》清除浮動
html代碼
<div class="box">
<div class="list">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
CSS代碼
.box {
float: left;
width: 400px;
height: 400px;
background: #ffeecc;
}
.list {
overflow: hidden;
margin-right: -20px;
}
.item {
float: left;
width: 120px;
height: 400px;
margin-right: 20px;
background: #acacab;
}
實現(xiàn)效果
image.png
3. 等高布局
通過給所有item欄目設(shè)置超高padding撐開欧宜，再用相同的margin值消除的原理脂凶，實現(xiàn)等高布局
html代碼
<div class="box">
<div class="list">
<div class="item">這邊內(nèi)容比較少，不會很高</div>
<div class="item">這里的內(nèi)容較少术浪，高度不會被撐得很高。這里的內(nèi)容較少胶台，高度不會被撐得很高睡蟋。</div>
<div class="item">內(nèi)容很多，撐開高度谱醇。內(nèi)容很多，撐開高度步做。內(nèi)容很多副渴，撐開高度。內(nèi)容很多全度，撐開高度煮剧。內(nèi)容很多，撐開高度。</div>
</div>
</div>
CSS代碼
.box {
width: 400px;
/* height: 400px; */
background: #ffeecc;
}
.list {
overflow: hidden;
margin-right: -20px;
}
.item {
float: left;
width: 120px;
margin-right: 20px;
background: #acacab;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
實現(xiàn)效果
image.png
4. 三欄自適應(yīng)布局
通過對三欄全部設(shè)置左浮動勉盅，使他們處于同一個文檔流佑颇，再用margin負值調(diào)整位置。
HTML代碼
<div class="box">
<div class="main">
<div class="content">中間內(nèi)容</div>
</div>
<div class="left">左側(cè)內(nèi)容</div>
<div class="right">右側(cè)內(nèi)容</div>
</div>
```css
#### CSS代碼
.main {
float:left;
width: 100%;
height: 500px;
}
.content {
margin: 0 220px;
height: 100%;
background: #efacfb;
}
.left,.right {
float: left;
width: 200px;
height: 500px;
background: #abcdef;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -200px;
}
#### 實現(xiàn)效果
