寫頁面的時候要實作這樣一個效果
要求：圖示之間有一條線進行連接配接，最上邊和最下邊的圖示沒有線進行連接配接，資料動态加載圖示和線也動态生成
一、第一種實作方法
橫着的每條資料是一個父級，然後所有的資料又是一個父級，然後給最外層的父級加border-left,然後每條資料設定一個margin-left的負值，每條資料之間的間距用margin-bottom來設定，具體實作如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标題</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
ul{
list-style-type: none;
border-left:1px solid #ccc;/*左側連接配接圖示的線*/
margin:0;
padding:0;
margin-left:15px;
}
ul li{
position:relative;
margin-bottom:20px;/*每條資料之間的間距*/
}
ul li div{
height:29px;
line-height:29px;
margin-left:30px;
}
ul li img{
width:30px;
height: 29px;
background:#fff;
position:absolute;
left:-15px;
top:0;
}
#nextDiv{
background: red
}
</style>
</head>
<body>
<ul id="wrap">
<li>
<img src="img.png" alt="">
<div>111111</div>
</li>
<li>
<img src="img.png" alt="">
<div>222222</div>
</li>
<li>
<img src="img.png" alt="">
<div>333333</div>
</li>
<li>
<img src="img.png" alt="">
<div>444444</div>
</li>
<li>
<img src="img.png" alt="">
<div>555555</div>
</li>
</ul>
<div id="nextDiv">下一個塊的内容</div>
</body>
</html>
運作之後實作的效果如下：
效果可以實作，但是有點問題就是，給每條資料進行了設定margin-bottom，最後一行資料下方也是有margin-bottm的，浏覽器解析的時候盒模型進行計算的時候是忽略了最後一行的margin-bottom，是以最後一個圖示下方沒有豎線。但是最後一行資料的margin-bottom是被忽略掉了麼？不是的 。再看紅色背景部分就是用來驗證最後一行的margin-bottom是不是存在的，可以看到中間我沒設定間隔，但是紅色背景部分和上邊是有間距的，這就是問題的關鍵所在：子元素設定的margin-bottom作用到了父元素上，使得父元素的下一個兄弟元素也就是紅色區域與父元素之間有了間隔
解決辦法有很多：
①可以單獨給最後一條資料一個樣式margin-bottom為0
②給父元素設定margin-bottom:-20px;
③可以不給每條資料也就是li都設定margin-bottom
可以利用相鄰元素選擇器li+li,相鄰元素選擇器
相鄰元素選擇器的使用：相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一進制素後的元素，且二者有相同父元素。
例如：
是以我們使用了相鄰元素選擇器就不用再，單獨設定最後一條資料了。
進行修改之後的css代碼如下：
<style>
ul{
list-style-type: none;
border-left:1px solid #ccc;/*左側連接配接圖示的線*/
margin:0;
padding:0;
margin-left:15px;
}
ul li{
position:relative;
}
li+li{
margin-top: 20px;/*每條資料之間的間距*/
}
ul li div{
height:29px;
line-height:29px;
margin-left:30px;
}
ul li img{
width:30px;
height: 29px;
background:#fff;
position:absolute;
left:-15px;
top:0;
}
#nextDiv{
background: red
}
</style>
這次變成了設定margin-top,因為相鄰元素選擇器是作用到相鄰的下一個元素
實作的效果如下：
可以看到縫隙不見了，為了取消這個間隙沒有什麼意義，畢竟大多數兩個塊之間還是有間隙的，這裡隻是想讓大家了解子元素的margin值會作用到父元素上的情況，不光是margin-bottom有這種情況，其實margin-top也有這種情況.
③第①②③種方法為了不作用到父元素直接不設定margin-bottom，其實還有防止不作用到父元素的方法，隻是我要實作的效果不适合這種方法，有三種方法可以解決：
（1）為父元素設定padding。
（2）為父元素設定border。
（3）為父元素設定
overflow: hidden
。
具體使用大家參考這篇文章：https://blog.csdn.net/man_tutu/article/details/62224844
我寫的這個效果不适合使用這種方法因為我設定了margin-bottom，并且不讓其作用到父元素上之後，那麼本身的bottom值就起作用了，那麼最後一個圖示下邊就會出現豎線。
關于margin的問題推薦大家一篇文章，可以詳細了解一下：https://www.cnblogs.com/zhangmingze/articles/4664074.html
二、第二種實作效果的方法，利用僞元素
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.add:before {
content: " ";
float: left;
/*display: inline-block;*/
background: url(img.png) 0 0 no-repeat;
background-size: 100% 100%;
height: 50px;
width: 50px;
margin-right: 20px;
}
.add{
height: 50px;
line-height: 50px;
margin-left: -25px;
}
.add+.add{
margin-top: 20px;
}
#wrap{
border-left: 1px solid #ccc;
margin-left: 30px;
}
</style>
</head>
<body>
<div id="wrap">
<div class="add">11111</div>
<div class="add">22222</div>
<div class="add">33333</div>
<div class="add">44444</div>
<div class="add">55555</div>
<div class="add">66666</div>
</div>
</body>
</html>
實作的效果如下：
同樣能實作效果，感覺這種方法更簡便一些。
好啦~就說這麼多吧，主要是說了兩件事，一個是實作這種效果最佳的方案，另一個是在寫的過程中遇到的margin值的問題，剛開始寫不知道大家能不能看明白，歡迎提供建議~~~一起進步~~~