|
在web網(wǎng)頁的開發(fā)過程中,大部分的文本,圖片或者視頻等都是可見的,但是有些相關(guān)元素是默認是需要隱藏的,當鼠標懸停上去之后才會顯示。
這類的效果在頁面中存在的概率特別高,那么想要讓一個元素隱藏的實現(xiàn)方案有很多,只是每種不同的實現(xiàn)方法的原理和最終呈現(xiàn)結(jié)果的渲染方式是不同的。那總體來看想要實現(xiàn)該隱藏的效果至少有10多種方法，具體如下：
1．設(shè)置display的值為none。
2．給對應(yīng)的元素添加 html的hidden屬性。
3．負margin值，數(shù)值給用負數(shù)，只要數(shù)值足夠大，就可以讓一個元素移出視口外。
4．負text-indent值，也是只要數(shù)值足夠大，就可以讓文本隱藏的效果。
5．設(shè)置height、font-size和line-height值為0，讓元素在視覺上不可見。
6．CSS的clip讓元素在視覺上不可見。
7．position:absolute配合任何一個足夠大的left、right、bottom或top的負值，讓元素不在視口范圍內(nèi)顯示。
8．visibility設(shè)置值為hidden在視覺上讓元素不可見。
9．opacity設(shè)置值為0在視覺上讓元素不可見。
10．使用transform里面的縮放來進行不可見隱藏。
當前想要隱藏一個元素的方法不僅僅有這些，其他的也可以。上面所提到的方法，有的是讓 一個元素徹底隱藏，所謂的徹底隱藏就是元素的空間和里面的內(nèi)容都不見；還有的方法只是隱藏內(nèi)容，但是空間還在，如果想要徹底的掌握應(yīng)該在什么場景下用哪個方法，那么還是有必要仔細去觀察他們之間的不同的，接下來我們一起來看一下吧。
方法1：設(shè)置display的值是none
在CSS中，html的每個元素都可以通過display的值改變盒子本身的類型，簡單來理解display是一個“整形醫(yī)院”，一個元素想要把自己本身整成什么樣子都是可以通過display這個醫(yī)院來進行調(diào)整的。當我們設(shè)置display的值為none的時候，就是把該元素整沒有了。
使用這個方法的時候特別要注意的就是一旦添加了display：none；之后，該元素以及后代元素中的任何內(nèi)容都不存在了。
方法2：新的HTML5語法環(huán)境里面，新增加了一個hidden屬性，當給指定的標簽添加了hidden屬性之后，就可以隱藏該元素。
方法3：負margin值，當使用margin為負數(shù)移動盒子位置的時候，可以讓盒子移出可視范圍，但是此時的p空間還在。
方法4：負text-index值，這個方法只是隱藏盒子里面的內(nèi)容，但是盒子還在。
方法5：設(shè)置height font-size 和line-height的值都是0，這個方法使用了之后，盒子里面的內(nèi)容和空間都不在。
方法6：CSS的clip讓元素在視覺上不可見。
注意，該clip屬性只能在元素設(shè)置了“position:absolute”或者“position:fixed”屬性起作用，其次clip屬性目前已經(jīng)從網(wǎng)頁標準里面給移出了，現(xiàn)在更多的寫就是用clip-path來代替，所以如果想要兼容所有瀏覽器的話，可以書寫clip屬性和clip-path屬性一起用。這個方法隱藏之后，空間還在。
方法7：position:absolute配合任何一個足夠大的left、right、bottom或top的負值，讓元素不在視口范圍內(nèi)顯示。
定位這個屬性的目的主要不是為了做隱藏的，在一些具體的案例里面，需要在頁面上隱藏一個元素，但是呢又不想影響頁面布局，可以用position配合top和left的值，達到隱藏的效果，但是用這個方法的話是修養(yǎng)在該元素的祖先元素上添加overflow:hidden;
方法8：visibility設(shè)置值為hidden
CSS中，如果顯式的給元素設(shè)置了visibility屬性的值為hidden的話，那么該元素或其后代元素將會不可見。但它和display:none或hidden有所不同。
方法9：opacity設(shè)置值為0在視覺上讓元素不可見
Opacity在CSS中主要是用來設(shè)置元素的透明度的。其值是0~1之間的一個值，當元素的opacity的值設(shè)置為0，元素在屏幕上不可見（屏幕上隱藏起來），但在功能上與將元素設(shè)置為任何純色沒有什么不同。
元素仍然像往常一樣占用布局的空間，屏幕閱讀器同樣能讀取到，而且同樣具有交互可操作性。該屬性也是給想要隱藏的元素。
方法10：使用transform里面的縮放來進行不可見隱藏
transform：scale（）；函數(shù)，將里面的數(shù)值設(shè)置為0之后，就是把一個元素縮小為不可見。
這篇文章和大家一起了解了一下網(wǎng)頁當中的隱藏效果的方法，雖然隱藏元素的方法有很多種，但是總結(jié)起來主要就是2大類—
1.完全隱藏的，也就是空間和位置都不在
2.只是隱藏內(nèi)容，但是空間還在的。
好了，關(guān)于隱藏咱們就說到這里，方法不只有這些東西，還有其他的一些方法，歡迎來補充。
 |
