溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“css怎么隱藏頁面元素”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
一、css隱藏元素的四種實現
1.visibility:hidden，設置元素隱藏
代碼實例：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>元素隱藏--visibility:hidden</title>
<style>
.demo{
width:800px;
height:200px;
margin:50pxauto;
}
span{
visibility:hidden;
}
</style>
</head>
<body>
<divclass="demo">
<p>元素隱藏1--visibility:hidden,元素隱藏2--visibility:hidden,元素隱藏3--visibility:hidden</p>
<p>元素隱藏1--visibility:hidden,<span>元素隱藏2--visibility:hidden</span>,元素隱藏3--visibility:hidden</p>
</div>
</body>
</html>
效果圖：
2.jpg
visibility屬性規定元素是否可見。將它的值設為hidden只能從視覺上隱藏元素，被隱藏的元素本身依然占據它自己的位置并對我們的網頁布局起作用。
2.opacity:0，設置元素隱藏
代碼實例：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>元素隱藏--opacity:0</title>
<style>
.demo{
width:800px;
height:200px;
margin:50pxauto;
}
span{
opacity:0;
}
</style>
</head>
<body>
<divclass="demo">
<p>元素隱藏1--opacity:0,元素隱藏2--opacity:0,元素隱藏3--opacity:0</p>
<p>元素隱藏1--opacity:0,<span>元素隱藏2--opacity:0</span>,元素隱藏3--opacity:0</p>
</div>
</body>
</html>
“css怎么隱藏頁面元素”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
