console
<div class="box">
<input type="checkbox" id="check">
<div>
<p>
CSS属性 max-height 设置元素的最大高度。它防止height属性的使用值(used value)大于 max-height 的指定值。
</p>
</div>
<div class="content">
<p>
Defines the max-height as a percentage of the containing block's height. auto The browser will calculate and select a max-height
for the specified element. none No limit on the size of the box. max-content The intrinsic preferred max-height. min-content
The intrinsic minimum max-height. fit-content(
) Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content,
max(min-content, argument)).
</p>
</div>
<label for="check" class="check-in">更多</label>
<label for="check" class="check-out">收起</label>
</div>
.box{
width:250px;
}
input{
position: absolute;
clip: rect(0 0 0 0);
}
.check-in , .check-out {
cursor: pointer;
color: red;
}
.content{
overflow: hidden;
max-height: 0;
transition: max-height .25s;
}
:checked ~ .content{
max-height: 666px;
}
.check-out{
display: none;
}
:checked ~ .check-out {
display: inline-block;
}
:checked ~ .check-in {
display: none;
}