網(wǎng)上有很多關(guān)于pos機(jī)辦理元素,最全11種方法 css隱藏頁面元素 思路不一樣的知識(shí)，也有很多人為大家解答關(guān)于pos機(jī)辦理元素的問題，今天pos機(jī)之家(m.afbey.com)為大家整理了關(guān)于這方面的知識(shí)，讓我們一起來看下吧!
本文目錄一覽：
pos機(jī)辦理元素
前言在CSS中很多隱藏元素的方法，但這些方法的可訪問性、布局、動(dòng)畫、性能和事件處理的方式有所不同。
「動(dòng)畫：」 一些CSS隱藏元素的方法一般是全有或者全無，元素要么是完全可見，要么是完全不可見，并且沒有中間狀態(tài)。其他的，比如透明度，可以是一個(gè)范圍的值，所以在這中間過程插入動(dòng)畫成為可能；「可訪問性：」 下面的每一種方法都會(huì)在視覺上隱藏一個(gè)元素，但不一樣會(huì)真正的去除DOM元素。有一些方式隱藏元素后，屏幕閱讀器仍然能讀取到元素內(nèi)容；「事件處理：」 隱藏元素之后，有些方式元素上的事件仍然能被觸發(fā)，而有些方式就會(huì)導(dǎo)致元素上的事件觸發(fā)無效；「表現(xiàn)：」 瀏覽器加載并解析 HTML DOM 和 CSS 對(duì)象模型后，頁面將分三個(gè)階段呈現(xiàn)：布局（生成每個(gè)元素的幾何位置）、繪制（繪制每個(gè)元素的像素）、組合（以適當(dāng)?shù)捻樞蚍胖迷貙樱?。僅導(dǎo)致構(gòu)圖變化的效果明顯比影響布局的效果更好。在某些情況下，瀏覽器還可以使用硬件加速。實(shí)現(xiàn)方式通過css實(shí)現(xiàn)隱藏元素方法有如下：
1.display: none: 渲染樹不會(huì)渲染對(duì)象
2.visibility: hidden: 元素在頁面中仍占據(jù)空間，但是不會(huì)響應(yīng)綁定的監(jiān)聽事件。
3.opacity: 0: 元素在頁面中仍然占據(jù)空間，并且能夠響應(yīng)元素綁定的監(jiān)聽事件。
4.position: absolute: 通過使用絕對(duì)定位將元素移除可視區(qū)域內(nèi)，以此來實(shí)現(xiàn)元素的隱藏。
5.z-index: 負(fù)值:來使其他元素遮蓋住該元素，以此來實(shí)現(xiàn)隱藏。
6.clip/clip-path: 元素仍在頁面中占據(jù)位置，但是不會(huì)響應(yīng)綁定的監(jiān)聽事件。
7.transform: scale(0,0): 將元素縮放為 0，元素仍在頁面中占據(jù)位置，但是不會(huì)響應(yīng)綁定的監(jiān)聽事件。
8、color alpha 透明度
9、可以通過使用width="360px",height="auto" />
padding、border-width="360px",height="auto" />10、覆蓋另一個(gè)元素
11、transform 屬性可以用于元素的平移、縮放、旋轉(zhuǎn)或傾斜等。
1. visibility: hidden; 這個(gè)屬性只是簡單的隱藏某個(gè)元素, 但是元素占用的空間任然存在 2. opacity: 0; 一個(gè)CSS3屬性, 設(shè)置 0 可以使一個(gè)元素完全透明, 制作出和 visibility 一樣的效果 。 與 visibility 相比, 它可以被 transition 和 animate 。3. position: absolute; 使元素脫離文檔流, 處于普通文檔之上, 給它設(shè)置一個(gè)很大的 left 負(fù)值定位, 使元素定位在可見區(qū)域之外 。4. display: none; 元素會(huì)變得不可見, 并且不會(huì)再占用文檔的空間 。5. transform: scale(0); 將一個(gè)元素設(shè)置為無限小, 這個(gè)元素將不可見 。 這個(gè)元素原來所在的位置將被保留 。6. HTML5 hidden attribute; hidden 屬性的效果和 display:none; 相同, 這個(gè)屬性用于記錄一個(gè)元素的狀態(tài) 。7. height: 0; overflow: hidden; 將元素在垂直方向上收縮為0, 使元素消失 。 只要元素沒有可見的邊框, 該技術(shù)就可以正常工作 。8. filter: blur(0); 將一個(gè)元素的模糊度設(shè)置為0, 從而使這個(gè)元素“消失”在頁面中 。display:none
設(shè)置元素的display為none是最常用的隱藏元素的方法
.hide { display:none;}
將元素設(shè)置為display:none后，元素在頁面上將徹底消失
元素本身占有的空間就會(huì)被其他元素占有，也就是說它會(huì)導(dǎo)致瀏覽器的重排和重繪
消失后，自身綁定的事件不會(huì)觸發(fā)，也不會(huì)有過渡效果
特點(diǎn)：元素不可見，不占據(jù)空間，無法響應(yīng)點(diǎn)擊事件
color alpha 透明度可以將元素的color、background-color 和 border-color 等屬性設(shè)置為rgba(0,0,0,0)，這樣就會(huì)使元素完全透明：
div { color: rgba(0,0,0,0); background-color: rgba(0,0,0,0);}
這三個(gè)屬性都是支持設(shè)置動(dòng)畫效果的，需要注意，透明度不能應(yīng)用于帶有背景圖片的元素，除非它們是使用 linear-gradient 或類似方法生成的。
Alpha 通道可以設(shè)置為：
transparent：完全透明（中間不能插入動(dòng)畫）；rgba(r, g, b, a)：紅色、綠色、藍(lán)色和 alpha；hsla(h, s, l, a)：色相、飽和度、亮度和 alpha；#RRGGBBAA 或 #RGBA。transformtransform 屬性可以用于元素的平移、縮放、旋轉(zhuǎn)或傾斜等?？梢允褂?scale(0) 或者 translate(-9999px, 0px) 屬性值來將元素隱藏：
div { transform: scale(0);}div { translate(-9999px, 0px)}
transform 屬性提供了出色的性能和硬件加速，因?yàn)樵乇挥行У匾苿?dòng)到了單獨(dú)的層中，并且可以在 2D 或 3D 中進(jìn)行動(dòng)畫處理。原始的布局空間會(huì)保持原樣，并不會(huì)受影響。使用這種方式隱藏的元素不會(huì)觸發(fā)任何事件。
z-index可以通過將元素的 z-index 屬性設(shè)置為負(fù)值，以實(shí)現(xiàn)元素的隱藏。這實(shí)際上就是將元素放在了我們看不到的層。
div { z-index: -1;}position
position屬性允許使用top、bottom、left、right 從頁面中的默認(rèn)位置移動(dòng)元素。因此，絕對(duì)定位的元素可以通過左鍵：-9999px 等值移出屏幕：
div { position: absolute; left: -999px;}覆蓋另一個(gè)元素
通過在元素的上面放置與背景顏色相同的元素，可以在視覺上隱藏一個(gè)元素。下面來使用::after偽元素來實(shí)現(xiàn)：
div::after { position: absolute; content: ''; top: 0; bottom: 100%; left: 0; right: 0; background-color: #fff;}
雖然這從技術(shù)上講是可以實(shí)現(xiàn)的，但是這樣做需要更多的代碼。
縮小尺寸可以通過使用width="360px",height="auto" />
div { height: 0; padding: 0; overflow: hidden;}
使用這種形式我們可以在隱藏過程中使用動(dòng)畫效果，并且他的性能會(huì)比 transform 好很多。
visibility:hidden設(shè)置元素的visibility為hidden也是一種常用的隱藏元素的方法
從頁面上僅僅是隱藏該元素，DOM結(jié)果均會(huì)存在，只是當(dāng)時(shí)在一個(gè)不可見的狀態(tài)，不會(huì)觸發(fā)重排，但是會(huì)觸發(fā)重繪
.hidden{ visibility:hidden}
給人的效果是隱藏了，所以他自身的事件不會(huì)觸發(fā)
特點(diǎn)：元素不可見，占據(jù)頁面空間，無法響應(yīng)點(diǎn)擊事件
opacity:0opacity屬性表示元素的透明度，將元素的透明度設(shè)置為0后，在我們用戶眼中，元素也是隱藏的
opacity: N 和 filter: opacity(N) 屬性可以傳遞一個(gè) 0 到 1 之間的數(shù)字，或者 0% 和 100% 之間的百分比，對(duì)應(yīng)地表示完全透明和完全不透明。
opacity: N：該屬性用來設(shè)置元素的透明度；filter: opacity(N) ：filter屬性用來設(shè)置元素的濾鏡，opacity是濾鏡重的透明度，用來設(shè)置元素的透明度。不會(huì)引發(fā)重排，一般情況下也會(huì)引發(fā)重繪
如果利用 animation 動(dòng)畫，對(duì) opacity 做變化（animation會(huì)默認(rèn)觸發(fā)GPU加速），則只會(huì)觸發(fā) GPU 層面的 composite，不會(huì)觸發(fā)重繪
.transparent { opacity:0;}
由于其仍然是存在于頁面上的，所以他自身的的事件仍然是可以觸發(fā)的，但被他遮擋的元素是不能觸發(fā)其事件的
需要注意的是：其子元素不能設(shè)置opacity來達(dá)到顯示的效果
特點(diǎn)：改變?cè)赝该鞫?，元素不可見，占?jù)頁面空間，可以響應(yīng)點(diǎn)擊事件
在現(xiàn)代瀏覽器中，這兩者之間幾乎沒有實(shí)際的區(qū)別，但如果同時(shí)應(yīng)用多種效果（模糊、對(duì)比度、灰度等）時(shí)，應(yīng)該使用 filter 屬性。
注意：opacity 可以設(shè)置動(dòng)畫并提供出色的性能，但頁面上保留完全透明的元素可能會(huì)觸發(fā)事件。
設(shè)置height、width="360px",height="auto" />將元素的margin，border，padding，height和width="360px",height="auto" />
等影響元素盒模型的屬性設(shè)置成0，如果元素內(nèi)有子元素或內(nèi)容，還應(yīng)該設(shè)置其overflow:hidden來隱藏其子元素.hiddenBox { margin:0; border:0; padding:0; height:0; width="360px",height="auto" />
特點(diǎn)：元素不可見，不占據(jù)頁面空間，無法響應(yīng)點(diǎn)擊事件
position:absolute將元素移出可視區(qū)域
.hide { position: absolute; top: -9999px; left: -9999px;}
特點(diǎn)：元素不可見，不影響頁面布局
clip-path通過裁剪的形式
.hide { clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);}
特點(diǎn)：元素不可見，占據(jù)頁面空間，無法響應(yīng)點(diǎn)擊事件
小結(jié)最常用的還是display:none和visibility:hidden，其他的方式只能認(rèn)為是奇招，它們的真正用途并不是用于隱藏元素，所以并不推薦使用它們
區(qū)別關(guān)于display: none、visibility: hidden、opacity: 0的區(qū)別，如下表所示：
display: none
visibility: hidden
opacity: 0
頁面中
不存在
存在
存在
重排
會(huì)
不會(huì)
不會(huì)
重繪
會(huì)
會(huì)
不一定
自身綁定事件
不觸發(fā)
不觸發(fā)
可觸發(fā)
transition
不支持
支持
支持
子元素可復(fù)原
不能
能
不能
被遮擋的元素可觸發(fā)事件
能
能
不能
代碼實(shí)現(xiàn)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width="360px",height="auto" />
line-height: 62px; padding: 0 24px;}.w_l-con { background-color: tomato;}.w_r-con { background-color: yellowgreen;}/* visibility: hidden 設(shè)置隱藏 */.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 設(shè)置隱藏 */.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 設(shè)置隱藏 */.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 設(shè)置隱藏 */.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) 設(shè)置隱藏 */.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 設(shè)置隱藏 (在 html 元素標(biāo)簽上設(shè)置) */.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">左側(cè)元素 -- 方法 1: visibility: hidden</p> <p class="w_now-vis">中間 隱藏 元素</p> <p class="w_r-con">右側(cè)元素 -- 方法 1: visibility: hidden</p> </div> <!-- opacity: 0 方法--> <div class="w_opac-hid-outer"> <p class="w_l-opa-con">左側(cè)元素 -- 方法 2: opacity: 0</p> <p class="w_now-opac">中間 隱藏 元素</p> <p class="w_r-opa-con">右側(cè)元素 -- 方法 2: opacity: 0</p> </div> <!-- position: absolute 方法 --> <div class="w_posi-hid-outer"> <p class="w_l-pos-con">左側(cè)元素 -- 方法 3: position: absolute</p> <p class="w_now-posi">中間 隱藏 元素</p> <p class="w_r-pos-con">右側(cè)元素 -- 方法 3: position: absolute</p> </div> <!-- display: none --> <div class="w_disp-hid-outer"> <p class="w_l-dis-con">左側(cè)元素 -- 方法 4: display: none</p> <p class="w_now-disp">中間 隱藏 元素</p> <p class="w_r-dis-con">右側(cè)元素 -- 方法 4: display: none</p> </div> <!-- transform: scale(0) --> <div class="w_trans-hid-outer"> <p class="w_l-tran-con">左側(cè)元素 -- 方法 5: display: none</p> <p class="w_now-trans">中間 隱藏 元素</p> <p class="w_r-tran-con">右側(cè)元素 -- 方法 5: display: none</p> </div> <!-- hidden attribute --> <div class="w_hidd-hid-outer"> <p class="w_l-hid-con">左側(cè)元素 -- 方法 6: hidden attribute</p> <p class="w_now-hidd">中間 隱藏 元素</p> <!-- <p class="w_now-hidd" hidden="true">中間 隱藏 元素</p> --> <p class="w_r-hid-con">右側(cè)元素 -- 方法 6: hidden attribute</p> </div> </div></body></html>給大家分享我收集整理的各種學(xué)習(xí)資料，前端小白交學(xué)習(xí)流程，入門教程等回答-下面是學(xué)習(xí)資料參考。
前端學(xué)習(xí)交流、自學(xué)、學(xué)習(xí)資料等推薦 - 知乎
以上就是關(guān)于pos機(jī)辦理元素,最全11種方法 css隱藏頁面元素 思路不一樣的知識(shí)，后面我們會(huì)繼續(xù)為大家整理關(guān)于pos機(jī)辦理元素的知識(shí)，希望能夠幫助到大家！
