css中實現元素隱藏的幾種方法

来源:https://www.cnblogs.com/simple-Xiao/archive/2022/03/30/16079188.html
-Advertisement-
Play Games

一、display:none; display翻譯成中文是顯示、展覽的意思;將display的屬性改為none可以實現元素的隱藏,元素和盒子模型也不生成,被隱藏的元素不占位置,看不見摸不著,它會導致瀏覽器的重排和重繪。 二、visibility:hidden; visibility翻譯成中文是能見、 ...


一、display:none;

display翻譯成中文是顯示、展覽的意思;將display的屬性改為none可以實現元素的隱藏,元素和盒子模型也不生成,被隱藏的元素不占位置,看不見摸不著,它會導致瀏覽器的重排和重繪。

二、visibility:hidden;

visibility翻譯成中文是能見、可見性的意思;hidden翻譯成中文的是隱藏、不易察覺的意思。將visibility的屬性改成hidden可以實現元素的隱藏,和display:none的區別是它占位置,看不見但是摸得著,所以它只會導致瀏覽器重繪而不會重排。

三、opacity:0;

opacity翻譯成中文是透明度、不透明的意思;將opacity的屬性改成0那就是透明度等於0看不見元素,但是這種方法也是只能隱藏看不見元素,和visibility:hidden一樣,元素依然存在頁面中。

四、position

利用定位將元素的top和left值設為足夠大的負數,使它移出屏幕在屏幕上看不見。

五、overflow:hidden

overflow翻譯成中文是漫出、溢出的意思;將overflow的屬性設置hidden可以實現元素隱藏,但是這個是超出盒子的部分隱藏,有局限性。

總:常用的方法就是display:none 和visibility:hidden;

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、 RDD創建 從本地文件系統中載入數據創建RDD sc:SparkContext(shell自動創建) 本地文件系統中載入數據創建RDD Spark採用textFile()方法來從文件系統中載入數據創建RDD 該方法把文件的URI作為參數,這個URI可以是: 本地文件系統的地址 或者是分散式文件 ...
  • 在寫sql語句的時候,數據類型是避不可少的一個環節,以下是我在學習的過程中總結的數據類型,僅供參考: 數值類型 類型 有符號(signed)範圍 無符號(unsigned)範圍 描述 tinyint (-128,127) (0,255) 小整數值 smallint (-32768,32767) (0 ...
  • 位元組跳動數據湖團隊在實時數倉構建寬表的業務場景中,探索實踐出的一種基於 Hudi Payload 的合併機制提出的全新解決方案。 位元組跳動數據湖團隊在實時數倉構建寬表的業務場景中,探索實踐出的一種基於 Hudi Payload 的合併機制提出的全新解決方案。 該方案在存儲層提供對多流數據的關聯能力, ...
  • ##數據分析 ###數據清洗:缺失值處理、1刪除記錄 2數據插補 3不處理 ###數據在https://book.tipdm.org/jc/219 中的資源包中數據和代碼chapter4\demo\data\catering_sale.xls ###常見插補方法 ####插值法-拉格朗日插值法 根據 ...
  • 本期我們給大家帶來的是“畫圖”應用開發者Rick的分享,希望能給你的HarmonyOS開發之旅帶來啟發~ ...
  • 在HarmonyOS中webview載入網頁的時候,需要有進度條,或者載入動畫進行用戶感知的交互,這樣可以優化用戶體驗,因此今天寫一篇載入動畫(效果如下)用於同學們進行學習,怎麼實現?首先我們需要學習“CommonDialog”“ WebView”“動畫開髮指導”三個知識儲備 我們分為“準備階段”, ...
  • 近日,HMS Core機器學習服務(ML Kit)文本翻譯功能在6.4.0版本更新中增加了10種小語種語言類型,分別是馬其他語、馬其頓、冰島、烏爾都語、波斯尼亞語、烏克蘭語、加泰羅尼亞語、斯洛維尼亞語、孟加拉語、南非荷蘭語。歡迎有相關出海App需求的開發者們訪問官網進一步瞭解,同時跟隨小編一起看看文 ...
  • 提到腳手架,大家想到的可能就是各種 xxx-cli,本文介紹的是另一種方式:以 vscode 插件的形式實現,提供 web 可視化操作,如下圖: 下麵介紹如何安裝使用,以及實現原理。 安裝使用 vscode 安裝 lowcode 插件,此插件是一個效率工具,腳手架只是其中一個功能,更多功能可以查看文 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...