css3-10 如何控制元素的显示和隐藏（display和visibility的区别是什么）

最新推荐文章于 2023-07-17 09:25:44 发布

weixin_34353714

最新推荐文章于 2023-07-17 09:25:44 发布

阅读量252

点赞数

文章标签： javascript ViewUI

css3-10 如何控制元素的显示和隐藏（display和visibility的区别是什么）

一、总结

一句话总结：使用的时候直接在元素的样式中设置display和visibility属性即可。推荐使用display，因为他是不占位隐藏。

1、display和visibility的区别？

占位隐藏和不占为隐藏
如何显示。（block显示，inline也可以显示，none隐藏）

2、display有哪三个属性？

block显示，inline也可以显示，none隐藏

3、display的显示隐藏属性和visibility的显示隐藏属性的区别是什么？

display3，visibility才两个，并且写法不同，visibility是显示:visible和隐藏:hidden。

显示和隐藏:
1.display
显示:block|inline
隐藏:none

2.visibility
显示:visible
隐藏:hidden

二、如何控制元素的显示和隐藏（display和visibility的区别是什么）

1、相关知识

显示和隐藏:
1.display
显示:block|inline
隐藏:none

2.visibility
显示:visible
隐藏:hidden

2、代码

display显示时要注意块和行

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9             margin:0px;
10         }
11         
12         .line1{
13             display:none;
14             /*visibility:hidden;*/
15         }    
16 
17     </style>
18     <script src="jquery.min.js"></script>
19 </head>
20 <body>
21     <span class='line1'>aaaaaaaaaaaaaaaaaaaaaaa</span>
22     <span class='line2'>bbbbbbbbbbbbbbbbbbbbbbb</span>
23     <span class='line3'>ccccccccccccccccccccccc</span>
24     <button>显示1</button>
25     <button>显示2</button>
26     <button>显示3</button>
27 </body>
28 <script>
29     $('button').eq(0).click(function(){
30         $('.line1').css({'display':'inline'});
31     })
32 </script>
33 </html>