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>