系统城装机大师 - 固镇县祥瑞电脑科技销售部宣传站!

当前位置:首页 > 网页制作 > CSS > 详细页面

11种常用css样式学习大结局滚动条与显示隐藏

时间:2020-02-23来源:电脑系统城作者:电脑系统城

滚动条展示 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>
复制代码
分享到:

相关信息

  • 纯CSS实现具有渐变和圆角的彩色边框

    传统的灰色纯色边框你是不是觉得太难看了?你是否想设计一些精美的边框,例如渐变、圆角、彩色的边框?那你来对地方了,本文将介绍如何用纯CSS就能实现具有渐变和圆角的彩色边框...

    2023-03-06

  • css圆角三角形的实现代码

    今天给大家带来一个如何实现圆角三角形的方案,这个方案虽然可以实现,但是也是借助拼凑等方式来实现的,假如想一个div来实现圆角三角形,还是比较困难的。之前文章讲了如何实现对话框,里面介绍了三角形的实现方式。今天讲讲...

    2023-03-06

系统教程栏目

栏目热门教程

人气教程排行

站长推荐

热门系统下载