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>