本文总结了一些使用CSS的实践经验.
元素显示与隐藏方法
1. display:none;
- 常用相应的显示方法为 display:block; 或 display:inline;等
- 这种方法会把元素从文档流中删除掉，即空出的位置会由后面的元素填补
- 不能使用transition
2. opacity:0;
- 其显示方法为 opacity:1(大于0就行);
- 存在文档中
- 可以使用transition
3. height:0; overflow:hidden;
- 这是作为父元素隐藏其相应的子元素. 如果没有子元素，则不用overflow属性;
- 再设置其height即可显示
- 存在文档中
- 可以使用transition
注意：如果使用height: auto; 来显示，则不会有动画效果。
除了用目测法计算高度以外(这真是个笨方法);较好的办法是使用js来获取元素的高度，存到一个变量里, 需要显示时再用js设置其height为该变量值
4. visibility:hidden;
- 显示方法为 visibility: visible;
- 存在文档中
- transition效果不理想，相当于延迟
一般而言，前三种更常用：
- 第一种用来显示或隐藏，
- 第二种定义动画，形成淡入淡出效果，
- 第三种则用来展开/闭合下拉列表
