當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

visibility的常见用法（小白专用）

發布時間：2023/12/8 编程问答 63 豆豆

生活随笔收集整理的這篇文章主要介紹了 visibility的常见用法（小白专用）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. visibility（可見性）

visibility可見性，用于顯示隱藏元素，但是保留原來的位置。

inherit繼承

visible	可見的（默認的）
hidden	隱藏元素后，占用原來的位置

visibility（可見性）的常見用法：

1. visible可見的（默認的）使用方法簡介

由于默認屬性值是顯示。所以三個小盒子都顯示。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 100px;height: 100px;}.one{background-color: palegreen;}.two{background-color: palevioletred;}.three{background-color: papayawhip;}</style> </head> <body><div class="one"></div><div class="two"></div><div class="three"></div> </body> </html>

2.當我們給第一個小盒子設置成不顯示（visibility: hidden;）時，第二個小盒子依舊占有原來的位置。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 100px;height: 100px;}.one{background-color: palegreen;visibility: hidden;}.two{background-color: palevioletred;}.three{background-color: papayawhip;}</style> </head> <body><div class="one"></div><div class="two"></div><div class="three"></div> </body> </html>

注意：visibility隱藏元素后，繼續占有原來位置。

如果隱藏元素想要原來位置，就用visibility：hidden

如果隱藏元素不想要原來位置，就用display：none

2.visibility（可見性）的inherit屬性值用法

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.one,.two,.three{width: 100px;height: 100px;}.one{background-color: palegreen;}.two{background-color: palevioletred;}.three{background-color: papayawhip;}.four,.five{width: 50px;height: 50px;background-color: powderblue;}</style> </head> <body><div class="one"><div class="four"></div></div><div class="two"><div class="five"></div></div><div class="three"></div> </body> </html>

當使用inherit屬性值時。
1.由于給第一個綠色大盒子設置了不顯示，所以，第一個盒子里的藍色小盒子繼承了大盒子hidden屬性，也不顯示。
2.第二個藍色小盒子繼承了粉色的大盒子的顯示默認屬性visible，所以顯示。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.one,.two,.three{width: 100px;height: 100px;}.one{background-color: palegreen;visibility: hidden;}.two{background-color: palevioletred;}.three{background-color: papayawhip;}.four,.five{width: 50px;height: 50px;background-color: powderblue;}</style> </head> <body><div class="one"><div class="four"></div></div><div class="two"><div class="five"></div></div><div class="three"></div> </body> </html>

總結

以上是生活随笔為你收集整理的visibility的常见用法（小白专用）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。