采用CSS實現元素隱藏的方法有很多種，比如定位到屏幕之外、透明度變換等。而常見的兩種方式是將元素設置為display:none或者visibility:hidden。KxG28資訊網——每日最新資訊28at.com

元素樣式設置為display:none

當元素樣式設置為display：none時，則該元素和它的子元素都會隱藏，不占據文檔流（就是元素原本占據的空間會釋放出來）。KxG28資訊網——每日最新資訊28at.com

給元素樣式設置display:none<div class="a">A</div><div class="b">B</div><div class="c">C</div>

樣式設置為KxG28資訊網——每日最新資訊28at.com

.a,.b,.c{  width:50px;  height:50px;  text-align:center;  background:blue;  margin-top:5px;  line-height:50px;  color:red;}

效果如：KxG28資訊網——每日最新資訊28at.com

圖片KxG28資訊網——每日最新資訊28at.com

添加display:none后效果如下：KxG28資訊網——每日最新資訊28at.com

圖片KxG28資訊網——每日最新資訊28at.com

B原本占據的空間會釋放出來。KxG28資訊網——每日最新資訊28at.com

display的其他常見屬性值及說明KxG28資訊網——每日最新資訊28at.com

元素樣式設置為：visibility:hidden

visibility:hidden也可以將元素隱藏，但是依然顯示著元素所占據的空間。如：KxG28資訊網——每日最新資訊28at.com

給元素樣式設置visibility:none<div class="a">A</div><div class="b">B</div><div class="c">C</div>

css樣式：KxG28資訊網——每日最新資訊28at.com

.a,.b,.c{  width:50px;  height:50px;  text-align:center;  background:blue;  margin-top:5px;  line-height:50px;  color:red;}.b{  visibility:hidden;}

效果如下：KxG28資訊網——每日最新資訊28at.com

圖片KxG28資訊網——每日最新資訊28at.com

visibility的其他屬性值：KxG28資訊網——每日最新資訊28at.com

KxG28資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-34660-0.htmlDisplay和Visibility的區別，你了解了嗎？

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 實現Eureka服務注冊和服務發現，你學會了嗎？

下一篇： Prometheus 的查詢語言 PromQL 詳解