CSS实践总结

本文总结了一些使用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效果不理想，相当于延迟

一般而言，前三种更常用：

• 第一种用来显示或隐藏，
• 第二种定义动画，形成淡入淡出效果，
• 第三种则用来展开/闭合下拉列表