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