基于实现元素的展开收缩，max-height，给定足够大的高度，就是言义上的任意高度，相对height来说比较灵活，两者的区别就是计算高度的过程，一个是由人为计算，一个由盒子内容高度去计算知识这种写法必须给定足够存放内容的高。
<style type="text/css">
.el{
max-height: 0;
overflow: hidden;
transition: max-height 1s;
-webkit-transform: max-height 1s;
background-color: #666;
}
:checked ~.el{
max-height:800px; /*足够内容的高度*/
}
#check ~label:before{
content:"展开";
display: inline-block;
}
:checked ~label:before{
content:"收缩" !important;
}
</style>
<input id="check" type="checkbox"><label for="check"></label>
<div class="el">
<div class="box" style="width: 100%;">
这<br/><br/>是<br/><br/>内<br/><br/>容<br/><br/>哦<br/><br/>
</div>
</div>
服务热线 19970861797
