html显示与隐藏元素的几种方式

html显示与隐藏元素的几种方式

 

1、display

　　none : 无 隐藏元素

　　block : 显示 转换为块级元素

 　  不占位：当隐藏的时候元素就完全没有了。不能看见和操作该元素。

　　优点：为其他元素让出空间，如二级导航伸缩功能、或者另外一个元素要占据该位置时用起来比较方便。

      简单使用：<div style="display: none;"></div>

2、visibility

　　visible ：显示

　　hidden ：隐藏

 

　　占位：当隐藏时只是看不见，实际还是在那里，但是也不能操作该元素。

　　优点：不影响原来布局，即达到了保持布局稳定，也能让元素隐藏，且不能操作。

 

      简单使用：<div style="visibility: visible;"></div>

3、overflow

　　hidden :溢出的部分隐藏掉

　　visible : 显示

　　auto ：自动出现滚动条

　　scroll ：一直有滚动条

　　优点：如单行/多行溢出隐藏使用方便。

      简单使用：<div style="overflow: hidden;"></div>

4、vue的v-if 和 v-show类似于wx:if等

　　v-if

　　条件为false隐藏(原理是组件或者标签条件不成立时销毁组件或者标签)

　　v-show的隐藏与显示是利用的css的display

 　　优点： 元素切换频繁建议使用 如 v-show这样的。它原理时css，能更多的让出性能给其他功能。

      简单使用：<div v-if="true"> 条件结果为true展示这组标签，反之不展示</div>

5、opacity 透明度。0 为全透明， 1为不透明

　　用法  box { opacity: 0; opacity: 1;opacity: 0.5;  }

　　说明：当值为小数时前面的0可省略。最小值为0  最大值为1  可取中间小数

　　占位：当以此方法做隐藏时，元素占位，且可操作元素。可和z-index联用发挥它更多的功能。

　　优点：半透明 有遮罩层效果、全透明占位隐藏依然可操作、简单实用。

      简单使用：<div style="opacity: .5"></div>

　　缺点：透明度有继承。也就是：父元素的透明度会被子元素继承，这样对一些子元素不要透明度的就不是很友好。

　　　　　比如：在一个box框里，大部分需要透明，但是它的按钮不需要透明这种。

　　解决方法：

　　　　1、背景颜色的rgba：background: rgba(0,0,0,.4);

　　　　2、可以把不需要透明的元素写到外面，通过定位进来。

 

如果对您有帮助，希望对面的你能点赞加评论！拜上！

若有bug还请告知,万分感谢！