元素的显示与隐藏

• 元素不可见 不占据空间 不渲染

<script type='text/html'>  
<img src='1.jpg'>
<script>
<!--如果出现需要嵌套的情况-->


<script type='text/html'>  
<textarea style='display:none;'>
<img src='1.jpg'>
</textarea>
</script>

• 元素不可见 不占据空间 不渲染 但是资源加载
  .dn{display:none }
• 元素不可见 不占据空间 不渲染 但是淡入淡出的效果

.hidden{
position:absolute;
visibility:hidden;
}

• 元素不可见 不可点击 占据空间

.vh{
    visibility:hidden;
}

• 元素不可见 不占据空间 不能点击 键盘能够访问

.clip{
  position:absolute;
  clip:rect(0,0,0,0);
}
.out{
position:relative;
left:-999em;
}

• 元素不可见 不能点击 **占据空间 ** 键盘能够访问

.lower{
  position:relative;
  z-index:-1;
}

• 元素不可见 **不占据空间 能够点击 **透明度

.opacity{
  position:absolute;
opacity：0；
filter：Alpha(opacity=0);
}

• 元素看不见，位置保留，可以点击可以选择

.opacity{ 
opacity：0；
filter：Alpha(opacity=0);
}