之前有整理過(guò)一部分知識(shí)點(diǎn), 一直沒(méi)有發(fā)布, 因?yàn)槎际怯嘘P(guān) CSS 方面的零散內(nèi)容; 現(xiàn)在想想無(wú)論做什么都需要慢慢積累, 所以還是決定將之前整理的相關(guān)內(nèi)容驗(yàn)證之后慢慢分享給你們, 現(xiàn)在看到感覺(jué)還挺有意思 笋婿。
好了廢話不多說(shuō), 直接上代碼以及圖例(為了讓大家方便閱讀, 都有自己驗(yàn)證過(guò)程的一些圖片作為分享) 誉裆。
首先來(lái)說(shuō)一下大概有幾種實(shí)現(xiàn) '隱藏元素' 的方法, 答案是: 我知道的是 8 種 。下面我們來(lái)一一分享具體的實(shí)現(xiàn)方法
1. visibility: hidden; 這個(gè)屬性只是簡(jiǎn)單的隱藏某個(gè)元素, 但是元素占用的空間任然存在
2. opacity: 0; 一個(gè)CSS3屬性, 設(shè)置 0 可以使一個(gè)元素完全透明, 制作出和 visibility 一樣的效果 缸濒。 與 visibility 相比, 它可以被 transition 和 animate 足丢。
3. position: absolute; 使元素脫離文檔流, 處于普通文檔之上, 給它設(shè)置一個(gè)很大的 left 負(fù)值定位, 使元素定位在可見(jiàn)區(qū)域之外 。
4. display: none; 元素會(huì)變得不可見(jiàn), 并且不會(huì)再占用文檔的空間 庇配。
5. transform: scale(0); 將一個(gè)元素設(shè)置為無(wú)限小, 這個(gè)元素將不可見(jiàn) 斩跌。 這個(gè)元素原來(lái)所在的位置將被保留 。
6. HTML5 hidden attribute; hidden 屬性的效果和 display:none; 相同, 這個(gè)屬性用于記錄一個(gè)元素的狀態(tài) 捞慌。
7. height: 0; overflow: hidden; 將元素在垂直方向上收縮為0, 使元素消失 耀鸦。 只要元素沒(méi)有可見(jiàn)的邊框, 該技術(shù)就可以正常工作 。
8. filter: blur(0); 將一個(gè)元素的模糊度設(shè)置為0, 從而使這個(gè)元素“消失”在頁(yè)面中 啸澡。
1. visibility: hidden 方法實(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=device-width, initial-scale=1.0">
<title> CSS 幾種隱藏元素的方法(瑣碎知識(shí)點(diǎn)整理) </title>
</head>
<style>
.w_vis-hid-outer {
background-color: steelblue;
display: flex;
justify-content: flex-start;
align-items: center;
}
.w_vis-hid-outer p {
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;
}
</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>
</div>
</body>
</html>
圖片示例
g-1-normal.png
g-1-set.png
2.opacity: 0; 方法實(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=device-width, initial-scale=1.0">
<title> CSS 幾種隱藏元素的方法(瑣碎知識(shí)點(diǎn)整理) </title>
</head>
<style>
.w_opac-hid-outer {
background-color: slategray;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 12px;
}
.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;
}
</style>
<body>
<div class="w_hide-shel">
<!-- opacity: 0 方法-->
<div class="w_opac-hid-outer">
<p class="w_l-opa-con">左側(cè)元素 -- 方法 1: opacity: 0</p>
<p class="w_now-opac">中間 隱藏 元素</p>
<p class="w_r-opa-con">右側(cè)元素 -- 方法 1: opacity: 0</p>
</div>
</div>
</body>
</html>
圖片示例
g-2-normal.png
g-2-set.png
3.position: absolute 方法實(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=device-width, initial-scale=1.0">
<title> CSS 幾種隱藏元素的方法(瑣碎知識(shí)點(diǎn)整理) </title>
</head>
<style>
.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;
}
/* position: absolute 設(shè)置隱藏 */
.w_now-posi {
background-color: skyblue;
position: absolute;
left: -6666px;
}
</style>
<body>
<div class="w_hide-shel">
<!-- 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>
</div>
</body>
</html>
圖片示例
g-3-normal.png
g-3-set.png
4.display: none ; 方法實(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=device-width, initial-scale=1.0">
<title> CSS 幾種隱藏元素的方法(瑣碎知識(shí)點(diǎn)整理) </title>
</head>
<style>
.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;
}
</style>
<body>
<div class="w_hide-shel">
<!-- 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>
</div>
</body>
</html>
圖片示例
g-4-normal.png
g-4-set.png
5.transform: scale(0); 方法實(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=device-width, initial-scale=1.0">
<title> CSS 幾種隱藏元素的方法(瑣碎知識(shí)點(diǎn)整理) </title>
</head>
<style>
.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);
}
</style>
<body>
<div class="w_hide-shel">
<!-- 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>
</div>
</body>
</html>
圖片示例
g-5-normal.png
g-5-set.png
6.hidden attribute 方法實(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=device-width, initial-scale=1.0">
<title> CSS 幾種隱藏元素的方法(瑣碎知識(shí)點(diǎn)整理) </title>
</head>
<style>
.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">
<!-- 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>
圖片示例
g-6-normal.png
g-6-set.png
剩余的 7袖订、8 兩種方法, 大家作為了解即可, 這里就不在上代碼了, 因?yàn)檫@兩種方式在實(shí)現(xiàn) 隱藏 效果時(shí), 很少會(huì)使用到 。
二: 完整代碼實(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=device-width, initial-scale=1.0">
<title> CSS 幾種隱藏元素的方法(瑣碎知識(shí)點(diǎn)整理) </title>
</head>
<style>
.w_vis-hid-outer {
background-color: steelblue;
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 42px;
}
.w_vis-hid-outer p {
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>
圖片示例
g-all-normal.png
g-all-set.png
