滾動條常見樣式展示 overflow-x: hidden;/*是否對內容的左/右邊緣進行裁剪*/overflow-y: hidden;/*是否對內容的上/下邊緣進行裁剪*/overflow:scroll;/*左右滾動*/overflow: hidden;/*截取*/overflow: auto;/*... ...
滾動條展示 overflow-x: hidden;/*是否對內容的左/右邊緣進行裁剪*/overflow-y: hidden;/*是否對內容的上/下邊緣進行裁剪*/overflow:scroll;/*左右滾動*/overflow: hidden;/*截取*/overflow: auto;/*自動*/
顯示與隱藏可以用display/* display: none; *//* display: block; *//* display: inline-block; */visibility顯示與隱藏visibility:hidden;/*隱藏*/visibility: visible;/*顯示*/需要註意的是display是不占位隱藏,visibility是占位隱藏；
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>11種常用css樣式學習大結局滾動條與顯示隱藏</title> 7 <style type="text/css"> 8 *{ 9 margin: 0; 10 padding: 0; 11 font: 14px/1.5em "Microsoft YaHei"; 12 } 13 /*滾動條常見樣式展示*/ 14 div.box{ 15 width: 300px; 16 height: 200px; 17 word-spacing: 5px; 18 margin: 0 auto; 19 border: 2px inset red; 20 overflow-x: hidden;/*是否對內容的左/右邊緣進行裁剪*/ 21 overflow-y: hidden;/*是否對內容的上/下邊緣進行裁剪*/ 22 overflow:scroll;/*左右滾動*/ 23 overflow: hidden;/*截取*/ 24 overflow: auto;/*自動*/ 25 } 26 div{ 27 /*display顯示隱藏*/ 28 /* display: none; */ 29 /* display: block; */ 30 /* display: inline-block; */ 31 32 /* visibility顯示與隱藏 */ 33 visibility:hidden; 34 visibility: visible; 35 } 36 </style> 37 </head> 38 <body> 39 <div class="box"> 40 <p style="width: 400px;">塞納河畔左岸的咖啡 我手一杯品嘗你的美 留下唇印的嘴 花店玫瑰名字寫錯誰 告白氣球風吹到對街 微笑在天上飛 你說你有點難追 想讓我知難而退 禮物不需挑最貴 只要香榭的落葉 喔營造浪漫的約會 不害怕搞砸一切 擁有你就擁有全世界セーヌ川の左岸にコーヒーを1杯持っています。あなたの美しさを味わい、リッププリントを殘します。フラワーショップの名前が間違っています。 シャンパンの葉がロマンチックなデートを演出する限り、最も高価なものを選ぶ必要があります。すべてを台無しにすることを恐れないでください。あなたには世界があります。</p><!--設置裡面內容寬度不然底部滾動不出現--> 41 </div> 42 <span>I have a cup of coffee on the left bank of the Seine. I taste your beauty and leave a lip print. The name of the flower shop rose is wrong. Who confessed that the balloon was blowing across the street and smiling in the sky. Need to pick the most expensive as long as the leaves of the Champs create a romantic date. Don't be afraid to mess everything up. You have the world.</span> 43 </body> 44 </html>
知識面擴展閱讀：CSS3 overflow-x 屬性 display顯示時要註意塊和行，為什麼說display是不占位隱藏,visibility是占位隱藏
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>為什麼說display是不占位隱藏,visibility是占位隱藏</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'>塞納河畔左岸的咖啡 我手一杯品嘗你的美 留下唇印的嘴 花店玫瑰名字寫錯誰 告白氣球風吹到對街 微笑在天上飛 你說你有點難追 想讓我知難而退 禮物不需挑最貴 只要香榭的落葉 喔營造浪漫的約會 不害怕搞砸一切 擁有你就擁有全世界</span> 22 <span class='line2'>セーヌ川の左岸にコーヒーを1杯持っています。あなたの美しさを味わい、リッププリントを殘します。フラワーショップの名前が間違っています。 シャンパンの葉がロマンチックなデートを演出する限り、最も高価なものを選ぶ必要があります。すべてを台無しにすることを恐れないでください。あなたには世界があります。</span> 23 <span class='line3'>I have a cup of coffee on the left bank of the Seine. I taste your beauty and leave a lip print. The name of the flower shop rose is wrong. Who confessed that the balloon was blowing across the street and smiling in the sky. Need to pick the most expensive as long as the leaves of the Champs create a romantic date. Don't be afraid to mess everything up. You have the world.</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':'block'}); 31 // }) 32 // display顯示時要註意塊和行 33 // $('button').eq(0).click(function(){ 34 // $('.line1').css({'display':'inline'}); 35 // }) 36 // visibility顯示和隱藏 37 $('button').eq(0).click(function(){ 38 $('.line1').css({'visibility':'visible'}); 39 }) 40 </script> 41 </html>
