display:none显示和隐藏

 1 <html>
 2 <head>
 3     <title>显示和隐藏问题title>
 4     <meta charset="utf-8"/>
 5     <style type="text/css">
 6         #a{
 7             width: 500px;
 8             height: 300px;
 9             background-color: red;
10             /*display:none;*/
11             visibility:hidden;
12         }
13         #b{
14             width: 100px;
15             height: 200px;
16             background-color: green;
17             display:block;
18             /*display:none;*/
19             visibility: hidden;
20         }
21         #c{
22             width: 100px;
23             height: 200px;
24             background-color: blue;
25         }
26     style>
27 head>
28 <body>
29     <div id="a">a
30         <div id="b">bdiv>
31         <div id="c">cdiv>
32     div>
33 body>
34 html>

display:none;和visibility: hidden;都可以隐藏元素。区别是display:none彻底不显示元素,元素不占空间,跟完全没有一样。visibility: hidden只是把元素隐藏不显示,但还是占有原来的位置空间的。

另:如果父div设置为隐藏属性,则其孩子也都被隐藏。(然后想单独设置孩子显示,也显示不出来,目前测试是这样)

转载于:https://www.cnblogs.com/caiquan/p/6163937.html

你可能感兴趣的:(display:none显示和隐藏)