抱歉,迟来了
2020年6月20日12:47:14
引子:针对这个效果,就不得不引用一下张老师的例子了,因为这个效果确实很奇思妙想
戳一下:https://demo.cssworld.cn/3/3-2.php
核心:关键点有几个:
1.使用了label联动隐藏的input,实现了点击选中效果,给实现其他元素的变化提供了基础
2.隐藏的input目的在于方便查询到文字隐藏的元素(文本的展示与隐藏)
3.隐藏的input目的在于查找到label元素,从而实现元素的显隐(更多/收起的文字效果)
4.文本的高度设置,高度不是一蹴而就的,生硬的,由此需要用到max-height,而max-height神奇的就是即使宽度超出了height:auto计算的值,但他仍然表现为height的高度,而不会出现莫名的一大片空白,这给我们实现效果提供了很大的便利
所以,继续深入理解css属性吧,他们真的非常奇妙~