大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。 

大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。

visibility属性用来确定元素是显示还是隐藏的，这用visibility="visible|hidden"来表示（visible表示显示，hidden表示隐藏）。
当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置
visibility隐藏占位置

而display：none隐藏并且不占位置
 1 @{
 2     ViewBag.Title = "Index";
 3 }
 4 
 5 
 6 <html>
 7 <head>
 8 
 9     <title></title>
10 
11     <style type="text/css">
12         div {
13             border: 1px solid red;
14             width: 30px;
15             height: 50px;
16         }
17     </style>
18 </head>
19 
20 <body>
21 
22 
23     <div>1</div>
24     <div>2</div>
25     <div>3</div>
26 
27     <br />
28 
29     <div>1</div>
30     <div style="display: none">2</div>
31     <div>3</div>
32 
33 
34     <br />
35     <div>2visibility: hidden</div>
36     <div>1</div>
37     <div style="visibility: hidden">2visibility: hidden</div>
38     <div>3</div>
39 
40 </body>

 

posted on 2015-08-24 17:52  高达  阅读(139)  评论(0)    收藏  举报

导航