html显⽰与隐藏元素的⼏种⽅式html显⽰与隐藏元素的⼏种⽅式
css始终显示滚动条1、display
  none : ⽆隐藏元素
  block : 显⽰转换为块级元素
　不占位：当隐藏的时候元素就完全没有了。不能看见和操作该元素。
  优点：为其他元素让出空间，如⼆级导航伸缩功能、或者另外⼀个元素要占据该位置时⽤起来⽐较⽅便。
简单使⽤：<div ></div>
2、visibility
  visible ：显⽰
  hidden ：隐藏
  占位：当隐藏时只是看不见，实际还是在那⾥，但是也不能操作该元素。
  优点：不影响原来布局，即达到了保持布局稳定，也能让元素隐藏，且不能操作。
简单使⽤：<div ></div>
3、overflow
  hidden ：溢出的部分隐藏掉
  visible : 显⽰
  auto ：⾃动出现滚动条
  scroll ：⼀直有滚动条
  优点：如单⾏/多⾏溢出隐藏使⽤⽅便。
简单使⽤：<div ></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 ></div>
  缺点：透明度有继承。也就是：⽗元素的透明度会被⼦元素继承，这样对⼀些⼦元素不要透明度的就不是很友好。    　⽐如：在⼀个box框⾥，⼤部分需要透明，但是它的按钮不需要透明这种。
  解决⽅法：
    1、背景颜⾊的rgba：background: rgba(0,0,0,.4);
    2、可以把不需要透明的元素写到外⾯，通过定位进来。
如果对您有帮助，希望对⾯的你能点赞加评论！拜上！
若有bug还请告知，万分感谢！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。