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

2022-08-23 20:54:12 字數 803 閱讀 9306

none : 無 隱藏元素

block : 顯示 轉換為塊級元素

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

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

visible :顯示

hidden :隱藏

佔位:當隱藏時只是看不見,實際還是在那裡,但是也不能操作該元素。

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

hidden :溢位的部分隱藏掉

visible : 顯示

auto :自動出現滾動條

scroll :一直有滾動條

優點:如單行/多行溢位隱藏使用方便。

v-if

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

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

用法  box

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

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

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

比如:在乙個box框裡,大部分需要透明,但是它的按鈕不需要透明這種。

解決方法:

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

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

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

jquery控制元素的隱藏和顯示的幾種方法

使用jquery控制div的顯示與隱藏,一句話就能搞定,例如 顯示 id show 表示為display block,隱藏 id hide 表示為display none id toggle 切換元素的可見狀態。如果元素是可見的,切換為隱藏的 如果元素是隱藏的,則切換為可見的。顯示 id css d...

元素的顯示與隱藏

display none 隱藏物件.display block 除了轉換層塊級元素,同時還有顯示元素的意思.特點 隱藏後不再保留位置,多用於下拉列表.visibility visible 物件可視 visibility hidden 物件隱藏 特點 隱藏後保留位置 停薪留職 屬性值 描述visibl...

元素的顯示與隱藏

配合後面js做特效,比如下拉列表,原先沒有,滑鼠經過,顯示下拉列表,應用極為廣泛 描述visible不剪下內容也不新增滾動條 hidden不顯示超過物件尺寸的內容,超出的部分隱藏掉 scroll不管超出內容否,總是顯示滾動條 auto超出自動顯示滾動條,不超出不顯示滾動條 清除浮動 隱藏超出內容,隱...