9種HTML中通過CSS方式隱藏元素的方法

、通過style屬性中的 display : none { 這種是最常用方式之一 }

display : none

這兩種方式的區別是: display 設置為 none之后, 該元素不占用文檔流

visibility 設置為 hidden之后, 該元素仍然占用文檔流, 只不過是看不見了而已

2 、通過style屬性中的 visibility : hidden { 這種也是最常用的方式之一 }

visibility : hidden

3 、通過相對定位移動當前元素到屏幕左側

div{     
    position: relative;     
    left: -100%
}

但是要記住:

1 元素仍然占用標準文檔流 2 百分比是相對父元素的寬度和高度的, 并不是相對可視區寬度偏移的

4 、通過元素內文本對齊將子元素移動到父元素右側, 配合超出后不顯示

.div{    
    text-indent: 100%;    
    white-space: nowrap;    
    overflow: hidden;
}

注意點: 此時子元素仍然占用文檔流, 只是我們隱藏了超出部分

5 、設置元素的寬度和高度為0, 元素直接消失

.div{    
    width: 0px;    
    height: 0px;
}

注意點:

1 標準文檔流是相對于一個容器來說的, 每一個容器有自己的文檔流, 我們只關心當前元素所在的文檔流 2 高度和寬度都設置為0后, 我們就可以認為此元素不再占用其父元素的標準文檔流了, 但是這個容器仍然存在, 這個容器也存在一個標準文檔流, 供其子元素使用; 其子元素不會消失, 仍然會正常顯示, 但是不會占用其父元素所在的標準文檔流( 即子元素顯示不會受其影響, 此元素占用文檔流的大小也不會受其子元素的影響 )

6 、設置元素透明度為 0

div{    
  opacity: 0;
}

這個感覺有點傻乎乎的, 掩耳盜鈴, 不過這個經常用來做動畫變換

7、旋轉元素, 使與當前頁面垂直

div{    
  transform: rotateX(90deg);
}

注意點: 這個只是顯示上的變換, 仍然會占用原元素大小和位置的文檔流, 其它各種變換也是如此。

8 、縮小元素尺寸到自身的0倍

div{    
  transform: scale(0);
}

注意點: 同上

9 、其它 transform 使其假不可見

為一個優秀的前端，我們經常遇到需要隱藏網頁上的元素的情況。在本文中，我們將分享8 種在 CSS 中隱藏元素的方法，每種方法都有優點和注意事項。

Opacity and Filter:Opacity

隱藏元素最簡單的方法之一是調整其不透明度。opacity 屬性允許我們通過將其值設置為 0 來使元素完全透明。例如：

.element {
  opacity: 0;
}

或者，我們可以將過濾器屬性與 opacity() 函數一起使用：

.element {
  filter: opacity(0);
}

opacity 和 filter: opacity() 都可以設置動畫并提供良好的性能。但是，需要注意的是，即使完全透明，元素仍保留在頁面上并且仍然可以觸發事件。

Visibility

Visibility屬性允許我們控制元素的可見性。通過將其設置為隱藏，我們可以隱藏元素，同時保留它在布局中占用的空間。例如：

.element {
  visibility: hidden;
}

默認情況下，輔助技術仍然可以訪問隱藏元素的內容，因此考慮對可訪問性的影響非常重要。要完全隱藏內容，可能需要其他 CSS 屬性或 ARIA 屬性，例如 aria-hidden="true"。

Display

display 屬性是一種廣泛使用的隱藏元素的方法。通過將其設置為 none，我們可以有效地從文檔流中刪除該元素，使其就像在 DOM 中從未存在過一樣。例如：

.element {
 display: none;
}

雖然 display: none 是一個流行的選擇，但它有一些局限性。它無法設置動畫，并且應用時會觸發布局更改，從而影響頁面上其他元素的位置。為了緩解這種情況，我們可以使用其他技術，例如定位。

Hidden 屬性

在 HTML 中，我們有隱藏屬性，可以將其添加到任何元素以隱藏它。當存在hidden屬性時，瀏覽器應用其默認樣式，相當于設置display:none。例如：

<p hidden>Hidden content</p>

當標簽的樣式不允許被改變時，此屬性非常有用。但是，它與使用 display ：none有相同的優點和限制。

使用 z-index

z-index 屬性控制 z 軸上元素的堆疊順序。給覆蓋元素分配更高的z-index值，我們可以在視覺上隱藏其下方的元素。例如：

.element {
  position: relative;
  z-index: 1;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* Same as the page background color */
  z-index: 2;
}

在此示例中，覆蓋元素位于使用較高 z-index 值的元素之上。

Color AIpha Transparency

我們還可以單獨隱藏特定的視覺屬性，例如顏色、背景顏色或邊框顏色，而不是使整個元素透明。這項技術使我們能夠創建有趣的效果和動畫。我們可以通過將 alpha 通道設置為 0 的 rgba() 值來實現這一點。例如：

.element {
  color: rgba(0, 0, 0, 0);
  background-color: rgba(0, 0, 0, 0);
  border-color: rgba(0, 0, 0, 0);
}

值得注意的是，這種技術可能不適用于具有圖像背景的元素，除非它們是使用線性漸變或類似方法生成的。

CIip-Path

Clip-path 屬性允許我們創建一個剪切區域來確定元素的哪些部分是可見的。通過設置一個值，例如circle(0)，我們可以完全隱藏該元素。例如：

.element {
  clip-path: circle(0);
}

使用剪輯路徑為有趣的動畫提供了范圍。

clip-path 屬性可以用于創建復雜的裁剪形狀，從而實現各種有趣的效果。在這種情況下，使用 circle(0) 作為裁剪路徑，是為了將元素完全裁剪掉，即不顯示任何內容。

需要注意的是，clip-path 是一個比較新的 CSS 屬性，不是所有瀏覽器都支持它。另外，即使瀏覽器支持 clip-path，也有可能出現一些兼容性問題，因此在使用 clip-path 時需要進行充分的測試和兼容性處理。

絕對定位

位置屬性允許我們將元素從頁面布局中的默認位置移動。通過使用position:absolute，我們可以將元素重新定位到屏幕外，從而有效地將其隱藏。例如：

.element {
  position: absolute;
  left: -9999px;
}

絕對定位提供了出色的瀏覽器支持，并且元素的原始尺寸保持不變。但是，需要注意的是，更改位置可能會影響頁面的整體布局。此外，屏幕外的元素可能無法交互，因為它們不再位于視口內。

結論

總之，CSS 提供了多種技術來隱藏網頁上的元素。通過了解每種方法的優點和局限性，我們可以為我們的特定用例選擇最合適的方法。

著橙先生上一篇的常見樣式屬性，可以用在絕大多數的標簽中，如div、sapn、p等標簽中，這篇繼續講樣式屬性，不過是一些特殊標簽的樣式屬性。

廢話不多說，直接往下看

1、<img src="圖片路徑" alt="圖片的描述說明文字">

Img標簽也有橙先生上一篇文章中介紹的常見樣式屬性，另外如上所見它也有自己特殊的屬性src和alt屬性，img就是圖片標簽，那么src就是引入圖片的屬性，其中輸入圖片路徑地址即可，而alt屬性是對圖片的描述文字，當圖片不能正常顯示時，將會顯示alt里的文字

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

如下圖所示

圖片未正常顯示的效果

<ul>

<li>這是ul標簽中的一個小LI</li>

</ul>

<ol>

<li>這是ol標簽中的一個小li</li>

</ol>

ul和ol的固定樣式效果

2、無序列表和有序列表，它們有固定的樣式如下圖的圓點和序號，大多數情況我們是不需要的，這時我們就可以通過list-style: none;這個樣式屬性取消它們的固定樣式

<li>這是ul標簽中的一個小LI</li>

</ul>

<li>這是ol標簽中的一個小li</li>

</ol>

ul和ol取消固定樣式的效果

3、另外在常見的標簽中的文章中提到的a標簽，其中href屬性就是填寫鏈接目標的地方，而target屬性定義被鏈接的文檔（即網址）在何處顯示，常用的就是“_blank”代表在新窗口中打開被鏈接文檔。默認的是“_self”代表在此窗口中打開被鏈接文檔，其他屬性值不常用，就不過多介紹了

<a href="需要跳轉到的網址或是文件，如" target="_blank">這個是文字的鏈接</a>

4、外邊距（margin）、內邊距（padding）,每個標簽元素都可以設定外邊距和內邊距，外邊距可以理解為是盒子以外的部分，而內邊距是盒子以內的部分直到內容的地方，看圖或是實際操作會比較好理解一些

所有HTML元素可以看作盒子，它包括：邊距（margin），邊框(border)，填充（padding），和實際內容(content)，如下圖

HTML元素可以看作盒子

當您指定一個 CSS 元素的寬度和高度屬性時，你只是設置內容區域的寬度和高度。要知道，完整大小的元素，你還必須添加內邊距，邊框和邊距。

下面的例子中設置div元素的寬度為300px，而實際寬度為450px

<div style="width: 300px;border: 25px solid orange;padding: 25px;margin: 25px;">這是一個div盒子</div>

實際寬度為450px的div

最終元素的總寬度計算公式是這樣的：

總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

元素的總高度最終計算公式是這樣的：

總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距

margin和padding（內邊距和外邊距）

margin或是padding只設置一個數值時代表上下左右都是這個數值，以下以margin為例的簡寫形式，代表的不同含義（padding也是一樣的）

margin屬性可以有一到四個值。

margin:25px 50px 75px 100px;

含義如下：

上外邊距為25px (margin-top: 25px;)

右外邊距為50px (margin-right: 50px;)

下外邊距為75px(margin-bottom: 75px;)

左外邊距為100px(margin-left: 100px;)

margin:25px 50px 75px;

含義如下：

上外邊距為25px(margin-top: 25px;)

左和右外邊距都為50px(margin-right: 50px;和margin-left: 50px)

下外邊距為75px(margin-bottom: 75px;)

margin:25px 50px;

含義如下：

上和下外邊距都為25px(margin-top: 25px和margin-bottom: 25px;)

左和右外邊距都為50px(margin-right: 50px;和margin-left: 50px)

margin:25px;

含義如下：

上、下、左、右外邊距都是25px（margin-top: 25px和margin-bottom: 25px;margin-right: 25px;margin-left: 25px）

這部分先講到這里，后續將會不斷的提到這些屬性，記得要上手操作哦，動手寫一下才能更好的理解！加油！爭取后續出個視頻，這樣可以更形象的講解。

在線咨詢

上一篇：什么是HTM或HTML文件？如何打開HTM和HTML文件？
下一篇：使用 Python Flask 創建簡易文件上傳服務

您的項目需求

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

整合營銷服務商

9種HTML中通過CSS方式隱藏元素的方法

您的項目需求