html顯示與隱藏元素的幾種方式

 

1、display

 

　　none : 無 隱藏元素

　　block : 顯示 轉換為塊級元素

 　  不占位：當隱藏的時候元素就完全沒有了。不能看見和操作該元素。

　　優點：為其他元素讓出空間，如二級導航伸縮功能、或者另外一個元素要占據該位置時用起來比較方便。

2、visibility

 

　　visible ：顯示

　　hidden ：隱藏

 

　　占位：當隱藏時只是看不見，實際還是在那里，但是也不能操作該元素。

　　優點：不影響原來布局，即達到了保持布局穩定，也能讓元素隱藏，且不能操作。

 

 

3、overflow

 

　　hidden :溢出的部分隱藏掉

　　visible : 顯示

　　auto ：自動出現滾動條

　　scroll ：一直有滾動條

　　優點：如單行/多行溢出隱藏使用方便。

4、vue的v-if 和 v-show類似於wx:if等

　　v-if

　　條件為false隱藏(原理是組件或者標簽條件不成立時銷毀組件或者標簽)

　　v-show的隱藏與顯示是利用的css的display

 　　優點： 元素切換頻繁建議使用 如 v-show這樣的。它原理時css，能更多的讓出性能給其他功能。

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

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

　　說明：當值為小數時前面的0可省略。最小值為0  最大值為1  可取中間小數

　　占位：當以此方法做隱藏時，元素占位，且可操作元素。可和z-index聯用發揮它更多的功能。

　　優點：半透明 有遮罩層效果、全透明占位隱藏依然可操作、簡單實用。

　　缺點：透明度有繼承。也就是：父元素的透明度會被子元素繼承，這樣對一些子元素不要透明度的就不是很友好。

　　　　　比如：在一個box框里，大部分需要透明，但是它的按鈕不需要透明這種。

　　解決方法：

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

　　　　2、可以把不需要透明的元素寫到外面，通過定位進來。

 

如果對您有幫助，希望對面的你能點贊加評論！拜上！

若有bug還請告知,萬分感謝！