/*flex布局*/
display: flex;
align-items: flex-end;
优点：只在父元素上设置即可，代码简洁
缺点：低版本浏览器不兼容
/*position方法*/
position: relative;/*父元素属性*/
position: absolute;/*子元素属性*/
bottom: 0;/*子元素底部对齐*/
再分别对每个子元素设置left属性即可
优点：兼容低版本浏览器
缺点：代码量较多，子元素脱离文档流
/*table-cell方法*/
display: table-cell;
vertical-align: bottom;
font-size:0;/*清除底部和子元素间的空隙*/
优点：只在父元素上设置，代码简洁；
缺点：IE8以下不兼容
(1).slide {
position: relative;
width: 500px;
height: 300px;
background-color: blue;
}
.slide .pointer {
position: absolute;
bottom: 10px;
left:50%;
transform:translateX(-50%);
}
.pointer i {
display: inline-block;
width: 10px;
height: 10px;
margin-right:5px;
background-color: black;
border-radius: 5px;
}(2)/* 缺点:指示器占位 */
.slide {
display:flex;
flex-flow:column;
background-color: blue;
}
.slide .pointer {
position: relative;
bottom:10px;
align-self: center;
}
.pointer i {
display: inline-block;
width: 10px;
height: 10px;
margin-right:5px;
background-color: black;
border-radius: 5px;
}(3).slide {
display:table;
text-align:center;
background-color: blue;
}
.slide .pointer {
margin-top:-25px;
height: 20px;
line-height:20px;
}
.pointer i {
display: inline-block;
width: 10px;
height: 10px;
margin-right:5px;
background-color: black;
border-radius: 5px;
}
