CSS隱藏元素的十四種方法

  1. 通過設置width:0或者height:0隱藏一個元素,文字隱藏可以設置color為背景色或transparent,但內容還在,所以用font-size:0;

  2. 將元素的opacity設置為0,元素本身還在,只是看不見;

  3. 通過絕對定位將元素移出屏幕范圍,文字可通過text-indent隱藏,元素還在,只是超出了屏幕范圍看不見(可以給頁面添加LOGO圖片,同時添加文字讓搜索引擎搜索到);

  4. 通過z-index隱藏,但是默認背景是透明的,需要給元素添加一個背景,元素還在;

  5. 超出元素寬高部分,設置overflow:hidden來隱藏超出部分,文字需省略號時加上text-overflow:ellipsis;

  6. 通過設置visibility:hidden,元素不可見,但還占位置;

  7. 通過設置display:none將元素徹底隱藏,不占位置;

  8. 將元素的背景設置為透明,字體大小設置為0,元素不可見,但還占位置;

  9. 將元素的max-height或max-width設置為0,但會有文字溢出的問題,需設置font-size為0;

  10. 通過transform的translate隱藏元素,相當于定位將元素移出屏幕范圍;

div{transform:translate(-99999px);}
  1. 將元素的縮放設置為0;
transform:scale(0);
  1. 讓元素重疊,類似width等于0;
div{transform:skew(90deg):}
  1. 設置margin為負值,將元素移出屏幕可視區;
div{margin-left:-99999px}
  1. 將元素剪裁。
-webkit-clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/247569.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/247569.shtml
英文地址,請注明出處:http://en.pswp.cn/news/247569.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

jquery.lazyload.js詳解

簡介lazyload.js用于長頁面圖片的延遲加載,視口外的圖片會在窗口滾動到它的位置時再進行加載,這是與預加載相反的。優點:它可以提高頁面加載速度;在某些情況清晰它也可以幫助減少服務器負載。安裝bower安裝:$ bower in…

Spring Boot Cache使用與整合

參考&#xff1a; 史上最全的Spring Boot Cache使用與整合Spring Cache擴展&#xff1a;注解失效時間主動刷新緩存 項目地址使用本地Caffeine緩存 引入依賴包 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starte…

vue-cli的打包配置文件

轉載原文: 詳解 vue-cli 的打包配置文件代碼&#xff08;給大家寫寫注釋&#xff09;. 一、vue-cli都做了什么 1、build/dev-server.js 文件 項目node的啟動文件&#xff0c;這里面做了webpack配置和node操作&#xff0c; 2、build/webpack.base.conf.js webpack基本配置文件…

Node.js 部署免費/自動續訂 HTTPS

統計了使用 Chrome 瀏覽器&#xff0c;訪問的站點統計中&#xff0c;HTTPS 使用率的增長情況&#xff1a;而在今年 2 月份&#xff0c;Chrome 團隊也宣布&#xff0c;將在 2018 年 7 月份發布的 Chrome 68 中&#xff0c;將沒有部署 HTTPS 的網站標記為 "不安全"。簡…

GSON 循環引用的對象轉為 JSON 造成棧溢出

對象轉 JSON 可能引發棧溢出的異常&#xff0c;一般是因為對象中的循環引用引起不斷遞歸。 常見的作法就是&#xff1a; 換一種 JSON 的序列化工具&#xff0c;比如 fastjson 默認支持消除對同一對象循環引用transient 修飾屬性顯式排除對象的某些屬性1. java對象引用成環說明 …

一些雜七雜八的前端知識1

一、this指向 this是函數運行時自動生成的一個內部對象&#xff0c;只能在函數內部使用 1. 指向全局變量 純粹的函數調用 2. 作為對象方法的調用 對象調用某個函數&#xff0c;這個函數里面所包含的this也就指向使用這個函數的對象了 3. 函數構造新對象時調用 new 4. a…

最新的vue webpack模板沒有dev-server.js文件,進行后臺數據模擬筆記

最新的vue里dev-server.js被替換成了webpack-dev-conf.js 在模擬后臺數據的時候直接在webpack-dev-conf.js文件中修改 第一步&#xff0c;在const portfinder require(‘portfinder’)后添加//第一步 const express require(express) const app express()//請求server var a…

20080331 - What is a PID, How is it useful when troubleshooting a system

PID Process Identifier, 是一個全局唯一的用來標識進程的整數。在多任務系統中&#xff0c;可用來診斷系統中發生錯誤的進程。 轉載于:https://www.cnblogs.com/likun/archive/2008/03/31/1130458.html

記一次el-input使用的坑

記一次el-input使用的坑 el-input使用不同與原生input&#xff0c;所以在vue中改變綁定的數據時需注意 <el-input v-model"form.schedule" input"validateNumber($event)" />要想在input時改變form.schedule的值來改變輸入框顯示的值&#xff0c;以…

使用pm2啟動Node和Vue項目教程

安裝pm2 $ npm install -g pm2 命令行全局安裝pm2 將pm2加入到命令中去?1234ln -s /usr/local/src/node-v8.9.1-linux-x64/bin/pm2 /usr/local/bin/pm2ln -s /usr/local/src/node-v8.9.1-linux-x64/bin/pm2-dev /usr/local/bin/pm2-devln -s /usr/local/src/node-v8.9.1-lin…

對正則的研究

視頻鏈接地址&#xff08;視頻格式可按需增刪&#xff09; /^https?:\/\/.*?(swf|avi|flv|mpg|rm|mov|wav|asf|3gp|mkv|rmvb|mp4)$/i 圖片鏈接地址&#xff08;圖片格式可按需增刪&#xff09; /^https?:\/\/.*?(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif)$/i 24小時制時間&a…

MVVM原理還你

眾所周知當下是MVVM盛行的時代&#xff0c;從早期的Angular到現在的React和Vue&#xff0c;再從最初的三分天下到現在的兩虎相爭。 無疑不給我們的開發帶來了一種前所未有的新體驗&#xff0c;告別了操作DOM的思維&#xff0c;換上了數據驅動頁面的思想&#xff0c;果然時代的進…

poj1316

1&#xff0e;鏈接地址 https://vjudge.net/problem/POJ-1316 2&#xff0e;問題描述 In 1949 the Indian mathematician D.R. Kaprekar discovered a class of numbers called self-numbers. For any positive integer n, define d(n) to be n plus the sum of the digits of …

CSS頁面布局解決方案大全

前端布局非常重要的一環就是頁面框架的搭建&#xff0c;也是最基礎的一環。在頁面框架的搭建之中&#xff0c;又有居中布局、多列布局以及全局布局&#xff0c;今天我們就來總結總結前端干貨中的CSS布局。 居中布局 水平居中 1&#xff09;使用inline-blocktext-align&#xff…

AES加密算法的學習筆記

AES簡介高級加密標準(AES,Advanced Encryption Standard)為最常見的對稱加密算法(微信小程序加密傳輸就是用這個加密算法的)。 對稱加密算法也就是加密和解密用相同的密鑰&#xff0c;具體的加密流程如下圖&#xff1a; 下面簡單介紹下各個部分的作用與意義&#xff1a; 明文P沒…

為什么要用setTimeout模擬setInterval ?

setInterval有兩個缺點&#xff1a; 使用setInterval時&#xff0c;某些間隔會被跳過&#xff1b;可能多個定時器會連續執行&#xff1b;在前一個定時器執行完前&#xff0c;不會向隊列插入新的定時器&#xff08;解決缺點一&#xff09;保證定時器間隔&#xff08;解決缺點二&…

前端 crypto-js aes 加解密

背景 前段時間公司做項目&#xff0c;該項目涉及到的敏感數據比較多&#xff0c;經過的一波討論之后&#xff0c;決定前后端進行接口加密處理&#xff0c;采用的是 AES BASE64 算法加密~ 網上關于 AES 對稱加密的算法介紹看上一篇&#xff01; 具體實現 其實搞懂了是怎么一回事…

對排序算法的研究

算法是什么&#xff1f;、 算法&#xff08;Algorithm&#xff09; 代表著用系統的方法描述解決問題的策略機制&#xff0c;可以通過一定規范的 輸入&#xff0c;在有限時間內獲得所需要的 輸出。 一個算法的好壞是通過 時間復雜度 與 空間復雜度 來衡量的。 簡單來說&#xff…

js實用算法

判斷文本是否為回文 定義&#xff1a;如果將一個文本翻轉過來&#xff0c;能和原文本完全相等&#xff0c;那么就可以稱之為“回文”。 方法一&#xff08;字符串、數組內置方法&#xff09;123456789101112131415/** 判斷文字是否為回文* param {string|number} val 需要判斷的…

stylus

stylus格式 指將css中{} &#xff1b;去掉即可