纵向进度条向上过度
分析:span和两个div全部绝对定位。
#div1{
width: 100px;
height: 300px;
background: rosybrown;
position: absolute;
border: 2px solid red;
}
#div2{
width: 100px;
background: #0000ff;
height: 11px;
position: absolute;
bottom: 0;
left: 0;
opacity:0.2;
transition:all 2s ease;
}
span{
display: block;
position: absolute;
z-index: 9999;
color: brown;
font-size: 36px;
line-height:300px;
}
#div2:hover{
height: 200px;
}
<body>
<span>40%</span>
<div id="div1">
<div id="div2">
</div>
</div>
</body>
子div撑不开父元素:
1:子元素float父div撑不开解决方案:
/*方案3:常用方法
给父元素加:overflow:hidden
方案4:常用方法
给父元素添加:display:table
*/
/*
方案一:容易有bug不建议使用
子div被float之后就丢失了clear:both和display:block样式,所以外部的div不会被撑开
想让父div撑开解决方案:在最下面添加<div style="clear:both;"></div>。这样,其实就在最后增加了clear的动作。
*/
<div style="width:200px;border:1px solid red;display:table" class="clearfix">
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
</div>