廣州藍景技術分享—CSS中實現元素的隱藏方法

ello~~各位小伙伴，今天我們廣州藍景實訓部，繼續和大家分享前端技術干貨，CSS隱藏元素

總結出7種隱藏元素的辦法

1.CSS display的值是none。(該元素是不會在頁面上顯示的)

div{
    display: none;
}

2. type="hidden"的表單元素。(該元素是不會在頁面上顯示的)

3. 寬度和高度都顯式設置為0。(該元素會在頁面上顯示)

div{
    width: 0;
    height: 0;
}

4. 一個祖先元素是隱藏的，(該祖先以及祖先以下的元素是不會在頁面上顯示)

5. CSS visibility的值是hidden(該元素是會在頁面上顯示，還占原來的位置)

div{
    visibility: hidden;
}

6. CSS opacity的指數是0(該元素是會在頁面上顯示，還占原來的位置)

div{
    opacity: 0;
}

7. 將position設為absolute然后將位置設到不可見區域

div{
   position: absolute;
   top: -9999px;
   left: -9999px;
}

想要了解更多web前端開發技術資料，可在評論區留言！也可添加我們微信：philip_tan

平常的樣式排版中，我們經常遇到將某個模塊隱藏，下面我整理了一下隱藏元素的多種方法以及對比（有的占據空間，有的不占據空間。有的可以點擊，有的不能點擊。）：

( 一 ) display: none;

特點：元素不可見，不占據空間，無法響應點擊事件。

.hide{
 display: none; 
}

( 二 ) opacity: 0; ( IE8以下版本：filter:Alpha(opacity=50) ）

特點：改變元素透明度，元素不可見，占據頁面空間，可以響應點擊事件。

.hide{
 opacity: 0;
 filter:Alpha(opacity=0); 
}

( 三 ) visibility: hidden;

特點：元素不可見，占據頁面空間，無法響應點擊事件。

.hide{
 visibility: hidden;
}

( 四 ) transform: scale(0);

( 1 ) zoom: 0.1; transform: scale(0);

特點：元素不可見，IE 6 7 9 不占據頁面空間，IE8 谷歌火狐歐朋等瀏覽器占據空間，無法響應點擊事件。

.hide{
 zoom: 0.1;
 transform: scale(0);
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -ms-transform: scale(0);
 -o-transform: scale(0); 
}

( 2 ) position: absolute; zoom: 0.1; transform: scale(0);

特點：元素不可見，不占據頁面空間，無法響應點擊事件。

.hide{
 position: absolute;
 zoom: 0.1;
 transform: scale(0);
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -ms-transform: scale(0);
 -o-transform: scale(0); 
}

( 五 ) width: 0; height: 0; 配合overflow: hidden;

特點：元素不可見，不占據頁面空間，無法響應點擊事件。但 padding值和 margin值依然存在，需要將內外邊距都調整為0。

.hide{
 display: inline-block;
 width: 0;
 height: 0;
 padding: 0;
 margin: 0;
 overflow: hidden; 
}

( 六 ) position: absolute; left: -200%; 或者 top: -200%；等，父級需要相對定位，這種left top值可以根據具體的實際情況去定義

特點：元素不可見，不占據頁面空間，無法響應點擊事件。

. father{
 position: relative;
 overflow: hidden;
}
.hide{
 position: absolute;
 left: -200%;//或top: -200%; 
}

( 七 ) clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px)

特點：元素不可見，占據頁面空間，無法響應點擊事件。

.hide{
 float: left;
 width: 150px;
 margin: 20px;
 clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px); 
}

( 八 ) margin: top | right | bottom | left ;父級添加overflow: hidden; (margin的值一定要小于（子級的寬度加上邊距的總和的負數）)

特點：元素不可見，不占據頁面空間，無法響應點擊事件。

.father{
 width: 400px;
 height: 400px;
 overflow: hidden;
}
.hide{
 display: inline-block;
 width: 200px;
 height: 200px;
 margin-left: -200px;
}

以上就是幾種隱藏元素的方法，我在以前的面試中，也碰到了面試官提出的一些關于隱藏元素css的對比，查閱了一些資料，做了以下整理：

( 一 ) display: none 和 visibility: hidden 的區別

1. 占據頁面空間( display: none 將元素隱藏后，在頁面是是不占有空間位置的，而visibility: hidden 將元素隱藏后，還保留著元素大小的空間位置 ) ；

2. display: none 影響了 reflow和repaint(回流與重繪)，而visibility: hidden并沒有影響

3. 某個模塊添加了display: none; 它下面的任何子級都會被隱藏，而添加了visibility: hidden，子級一旦有添加visibility: visible的css，該子級將不會被隱藏。

( 二 ) display: none 和 opacity: 0的區別

1. 占據頁面空間( display: none 將元素隱藏后，在頁面是是不占有空間位置的，而opacity: 0 只是改變了元素的透明度將其隱藏，還保留著元素大小的空間位置 ) ；

2. display: none 不會被子類繼承，但是子類一樣不會顯示。 opacity: 0 會被子類繼承，但不能像visibility的屬性一樣，給子類添加opacity:1，并不能將子類顯示。

3. css3 transition 屬性對display：none 并無效果，但對opacity 則有效果。（附加一句，對visibility: hidden也無效果）

.效果圖

二.相關代碼

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus?">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>文字隱藏</title>
 <style>
 div.elli{
 border:1px solid;
 overflow:hidden;/*內容會被修剪，并且其余內容是不可見的*/
 white-space:nowrap;/*強制在一行顯示*/
 text-overflow:ellipsis;/*顯示省略符號來代表被修剪的文本*/
 width:200px;
 height:20px;
 }
 div.clip
 {
 border:1px solid;
 overflow:hidden; /*超出部分隱藏*/
 white-space:nowrap;/*強制在一行顯示*/
 text-overflow:clip;
 width:200px;
 height:20px;
 }
 div.hide
 {
 overflow:hidden;
 border:1px solid;
 width:200px;
 height:50px;
 }
 div.scroll
 {
 overflow:scroll;/*內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容*/
 border:1px solid;
 width:200px;
 height:50px;
 }
 </style>
</head>
<body>
<h3 style="color: #98bf21">1.多余文字自動裁剪</h3>
<div class="clip">如果此處的文字較多，將自動裁切裁切裁切裁切</div>
<br>
<h3 style="color: #98bf21">2.多余文字省略號代替</h3>
<div class="elli"><a href="#">如果此處的文字較多，將自動用省略號代替！</a></div>
<br>
<h3 style="color: #98bf21">3.多余文字自動隱藏</h3>
<div class="hide">如果此處的文字較多，將自動隱藏！如果此處的文字較多，將自動隱藏！如果此處的文字較多，將自動隱藏！如果此處的文字較多，將自動隱藏！如果此處的文字較多，將自動隱藏！</div>
<br>
<h3 style="color: #98bf21">4.多余文字出現滾動條</h3>
<div class="scroll">如果此處的文字較多，將出現滾動條！如果此處的文字較多，將出現滾動條！如果此處的文字較多，將出現滾動條！</div>
</body>
</html>

三.名詞釋義

3.1 overflow

3.2 white-space

3.3 text-overflow

在線咨詢

上一篇：金山辦公助理總裁晁云曈：WebOffice的協作賦能
下一篇：Spring Cloud Gateway 自定義打印

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

廣州藍景技術分享—CSS中實現元素的隱藏方法

.效果圖

二.相關代碼

三.名詞釋義

您的項目需求