css隐藏屬性怎麼設置?在CSS中很多隐藏元素的方法，但這些方法的可訪問性、布局、動畫、性能和事件處理的方式有所不同，現在小編就來說說關于css隐藏屬性怎麼設置?下面内容希望能幫助到你，我們來一起看看吧!
在CSS中很多隐藏元素的方法，但這些方法的可訪問性、布局、動畫、性能和事件處理的方式有所不同。
通過css實現隐藏元素方法有如下：
1.display: none: 渲染樹不會渲染對象
2.visibility: hidden: 元素在頁面中仍占據空間，但是不會響應綁定的監聽事件。
3.opacity: 0: 元素在頁面中仍然占據空間，并且能夠響應元素綁定的監聽事件。
4.position: absolute: 通過使用絕對定位将元素移除可視區域内，以此來實現元素的隐藏。
5.z-index: 負值:來使其他元素遮蓋住該元素，以此來實現隐藏。
6.clip/clip-path: 元素仍在頁面中占據位置，但是不會響應綁定的監聽事件。
7.transform: scale(0,0): 将元素縮放為 0，元素仍在頁面中占據位置，但是不會響應綁定的監聽事件。
8、color alpha 透明度
9、可以通過使用width、height、padding、border-width 或 font-size 來縮小元素的尺寸
10、覆蓋另一個元素
11、transform 屬性可以用于元素的平移、縮放、旋轉或傾斜等。
1. visibility: hidden; 這個屬性隻是簡單的隐藏某個元素, 但是元素占用的空間任然存在
2. opacity: 0; 一個CSS3屬性, 設置 0 可以使一個元素完全透明, 制作出和 visibility 一樣的效果 。 與 visibility 相比, 它可以被 transition 和 animate 。
3. position: absolute; 使元素脫離文檔流, 處于普通文檔之上, 給它設置一個很大的 left 負值定位, 使元素定位在可見區域之外 。
4. display: none; 元素會變得不可見, 并且不會再占用文檔的空間 。
5. transform: scale(0); 将一個元素設置為無限小, 這個元素将不可見 。 這個元素原來所在的位置将被保留 。
6. HTML5 hidden attribute; hidden 屬性的效果和 display:none; 相同, 這個屬性用于記錄一個元素的狀态 。
7. height: 0; overflow: hidden; 将元素在垂直方向上收縮為0, 使元素消失 。 隻要元素沒有可見的邊框, 該技術就可以正常工作 。
8. filter: blur(0); 将一個元素的模糊度設置為0, 從而使這個元素“消失”在頁面中 。
設置元素的display為none是最常用的隐藏元素的方法
.hide {
display:none;
}
将元素設置為display:none後，元素在頁面上将徹底消失
元素本身占有的空間就會被其他元素占有，也就是說它會導緻浏覽器的重排和重繪
消失後，自身綁定的事件不會觸發，也不會有過渡效果
特點：元素不可見，不占據空間，無法響應點擊事件
color alpha 透明度可以将元素的color、background-color 和 border-color 等屬性設置為rgba(0,0,0,0)，這樣就會使元素完全透明：
div {
color: rgba(0,0,0,0);
background-color: rgba(0,0,0,0);
}
這三個屬性都是支持設置動畫效果的，需要注意，透明度不能應用于帶有背景圖片的元素，除非它們是使用 linear-gradient 或類似方法生成的。
Alpha 通道可以設置為：
transform 屬性可以用于元素的平移、縮放、旋轉或傾斜等。可以使用 scale(0) 或者 translate(-9999px, 0px) 屬性值來将元素隐藏：
div {
transform: scale(0);
}
div {
translate(-9999px, 0px)
}
transform 屬性提供了出色的性能和硬件加速，因為元素被有效地移動到了單獨的層中，并且可以在 2D 或 3D 中進行動畫處理。原始的布局空間會保持原樣，并不會受影響。使用這種方式隐藏的元素不會觸發任何事件。
z-index可以通過将元素的 z-index 屬性設置為負值，以實現元素的隐藏。這實際上就是将元素放在了我們看不到的層。
div {
z-index: -1;
}
position屬性允許使用top、bottom、left、right 從頁面中的默認位置移動元素。因此，絕對定位的元素可以通過左鍵：-9999px 等值移出屏幕：
div {
position: absolute;
left: -999px;
}
通過在元素的上面放置與背景顔色相同的元素，可以在視覺上隐藏一個元素。下面來使用::after僞元素來實現：
div::after {
position: absolute;
content: '';
top: 0;
bottom: 100%;
left: 0;
right: 0;
background-color: #fff;
}
雖然這從技術上講是可以實現的，但是這樣做需要更多的代碼。
縮小尺寸可以通過使用width、height、padding、border-width 或 font-size 來縮小元素的尺寸以實現元素的隐藏。可能還需要應用 overflow: hidden; 來确保内容不會溢出。
div {
height: 0;
padding: 0;
overflow: hidden;
}
使用這種形式我們可以在隐藏過程中使用動畫效果，并且他的性能會比 transform 好很多。
visibility:hidden設置元素的visibility為hidden也是一種常用的隐藏元素的方法
從頁面上僅僅是隐藏該元素，DOM結果均會存在，隻是當時在一個不可見的狀态，不會觸發重排，但是會觸發重繪
.hidden{
visibility:hidden
}
給人的效果是隐藏了，所以他自身的事件不會觸發
特點：元素不可見，占據頁面空間，無法響應點擊事件
opacity:0opacity屬性表示元素的透明度，将元素的透明度設置為0後，在我們用戶眼中，元素也是隐藏的
opacity: N 和 filter: opacity(N) 屬性可以傳遞一個 0 到 1 之間的數字，或者 0% 和 100% 之間的百分比，對應地表示完全透明和完全不透明。
不會引發重排，一般情況下也會引發重繪
如果利用 animation 動畫，對 opacity 做變化（animation會默認觸發GPU加速），則隻會觸發 GPU 層面的 composite，不會觸發重繪
.transparent {
opacity:0;
}
由于其仍然是存在于頁面上的，所以他自身的的事件仍然是可以觸發的，但被他遮擋的元素是不能觸發其事件的
需要注意的是：其子元素不能設置opacity來達到顯示的效果
特點：改變元素透明度，元素不可見，占據頁面空間，可以響應點擊事件
在現代浏覽器中，這兩者之間幾乎沒有實際的區别，但如果同時應用多種效果（模糊、對比度、灰度等）時，應該使用 filter 屬性。
注意：opacity 可以設置動畫并提供出色的性能，但頁面上保留完全透明的元素可能會觸發事件。
設置height、width屬性為0将元素的margin，border，padding，height和width等影響元素盒模型的屬性設置成0，如果元素内有子元素或内容，還應該設置其overflow:hidden來隐藏其子元素
.hiddenBox {
margin:0;
border:0;
padding:0;
height:0;
width:0;
overflow:hidden;
}
特點：元素不可見，不占據頁面空間，無法響應點擊事件
position:absolute将元素移出可視區域
.hide {
position: absolute;
top: -9999px;
left: -9999px;
}
特點：元素不可見，不影響頁面布局
clip-path通過裁剪的形式
.hide {
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}
特點：元素不可見，占據頁面空間，無法響應點擊事件
小結最常用的還是display:none和visibility:hidden，其他的方式隻能認為是奇招，它們的真正用途并不是用于隐藏元素，所以并不推薦使用它們
區别關于display: none、visibility: hidden、opacity: 0的區别，如下表所示：
|
display: none |
visibility: hidden |
opacity: 0 | |
|
頁面中 |
不存在 |
存在 |
存在 |
|
重排 |
會 |
不會 |
不會 |
|
重繪 |
會 |
會 |
不一定 |
|
自身綁定事件 |
不觸發 |
不觸發 |
可觸發 |
|
transition |
不支持 |
支持 |
支持 |
|
子元素可複原 |
不能 |
能 |
不能 |
|
被遮擋的元素可觸發事件 |
能 |
能 |
不能 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> CSS 幾種隐藏元素的方法(瑣碎知識點整理) </title>
</head>
<style>
.w_vis-hid-outer {
background-color: steelblue;
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 42px;
}
.w_vis-hid-outer p {
line-height: 62px;
padding: 0 24px;
}
.w_l-con {
background-color: tomato;
}
.w_r-con {
background-color: yellowgreen;
}
/* visibility: hidden 設置隐藏 */
.w_now-vis {
background-color: brown;
margin: 0 12px;
/* visibility: hidden; */
}
.w_opac-hid-outer {
background-color: slategray;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 12px;
margin-bottom: 42px;
}
.w_opac-hid-outer p {
line-height: 62px;
padding: 0 24px;
}
.w_l-opa-con {
background-color: snow;
}
.w_r-opa-con {
background-color: tan;
}
/* opacity: 0 設置隐藏 */
.w_now-opac {
background-color: skyblue;
margin: 0 12px;
/* opacity: 0; */
}
.w_posi-hid-outer {
background-color: slategray;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 12px;
margin-bottom: 42px;
}
.w_posi-hid-outer p {
line-height: 62px;
padding: 0 24px;
}
.w_l-pos-con {
background-color: snow;
margin-right: 12px;
}
.w_r-pos-con {
background-color: tan;
margin-left: 12px;
}
/* opacity: 0 設置隐藏 */
.w_now-posi {
background-color: skyblue;
/* position: absolute; */
/* left: -6666px; */
}
.w_disp-hid-outer {
background-color: red;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 12px;
margin-bottom: 42px;
}
.w_disp-hid-outer p {
line-height: 62px;
padding: 0 24px;
}
.w_l-dis-con {
background-color: #ccc;
margin-right: 12px;
}
.w_r-dis-con {
background-color: #212121;
margin-left: 12px;
color: #FFF;
}
/* display: none 設置隐藏 */
.w_now-disp {
background-color: blueviolet;
/* display: none; */
}
.w_trans-hid-outer {
background-color: darkorange;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 12px;
margin-bottom: 42px;
}
.w_trans-hid-outer p {
line-height: 62px;
padding: 0 24px;
}
.w_l-tran-con {
background-color: #ccc;
margin-right: 12px;
}
.w_r-tran-con {
background-color: #212121;
margin-left: 12px;
color: #FFF;
}
/* transform: scale(0) 設置隐藏 */
.w_now-trans {
background-color: blueviolet;
/* transform: scale(0); */
}
.w_hidd-hid-outer {
background-color: darksalmon;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 12px;
margin-bottom: 42px;
}
.w_hidd-hid-outer p {
line-height: 62px;
padding: 0 24px;
}
.w_l-hid-con {
background-color: steelblue;
margin-right: 12px;
}
.w_r-hid-con {
background-color: #212121;
margin-left: 12px;
color: #FFF;
}
/* hidden attribute 設置隐藏 (在 html 元素标簽上設置) */
.w_now-hidd {
background-color: red;
}
</style>
<body>
<div class="w_hide-shel">
<!-- visibility: hidden 方法 -->
<div class="w_vis-hid-outer">
<p class="w_l-con">左側元素 -- 方法 1: visibility: hidden</p>
<p class="w_now-vis">中間 隐藏 元素</p>
<p class="w_r-con">右側元素 -- 方法 1: visibility: hidden</p>
</div>
<!-- opacity: 0 方法-->
<div class="w_opac-hid-outer">
<p class="w_l-opa-con">左側元素 -- 方法 2: opacity: 0</p>
<p class="w_now-opac">中間 隐藏 元素</p>
<p class="w_r-opa-con">右側元素 -- 方法 2: opacity: 0</p>
</div>
<!-- position: absolute 方法 -->
<div class="w_posi-hid-outer">
<p class="w_l-pos-con">左側元素 -- 方法 3: position: absolute</p>
<p class="w_now-posi">中間 隐藏 元素</p>
<p class="w_r-pos-con">右側元素 -- 方法 3: position: absolute</p>
</div>
<!-- display: none -->
<div class="w_disp-hid-outer">
<p class="w_l-dis-con">左側元素 -- 方法 4: display: none</p>
<p class="w_now-disp">中間 隐藏 元素</p>
<p class="w_r-dis-con">右側元素 -- 方法 4: display: none</p>
</div>
<!-- transform: scale(0) -->
<div class="w_trans-hid-outer">
<p class="w_l-tran-con">左側元素 -- 方法 5: display: none</p>
<p class="w_now-trans">中間 隐藏 元素</p>
<p class="w_r-tran-con">右側元素 -- 方法 5: display: none</p>
</div>
<!-- hidden attribute -->
<div class="w_hidd-hid-outer">
<p class="w_l-hid-con">左側元素 -- 方法 6: hidden attribute</p>
<p class="w_now-hidd">中間 隐藏 元素</p>
<!-- <p class="w_now-hidd" hidden="true">中間 隐藏 元素</p> -->
<p class="w_r-hid-con">右側元素 -- 方法 6: hidden attribute</p>
</div>
</div>
</body>
</html>
給大家分享我收集整理的各種學習資料，前端小白交學習流程，入門教程等回答-下面是學習資料參考。
前端學習交流、自學、學習資料等推薦 - 知乎
更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
