滚动条展示 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是占位隐藏；

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

     <style type="text/css">

     *{

         margin: 0;

         padding: 0;

         font: 14px/1.5em "Microsoft YaHei";

     }

     /*滚动条常见样式展示*/

     div.box{

         width: 300px;

         height: 200px;

         word-spacing: 5px;

         margin: 0 auto;

         border: 2px inset red;

         overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/

         overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/

         overflow:scroll;/*左右滚动*/

         overflow: hidden;/*截取*/

         overflow: auto;/*自动*/

     }

     div{

         /*display显示隐藏*/

         /* display: none; */

         /* display: block; */

         /* display: inline-block; */

         /* visibility显示与隐藏 */

         visibility:hidden;

         visibility: visible;

     }

     </style>

 </head>

 <body>

     <div class="box">

         <p style="width: 400px;">塞纳河畔左岸的咖啡  我手一杯品尝你的美  留下唇印的嘴  花店玫瑰名字写错谁  告白气球风吹到对街  微笑在天上飞  你说你有点难追  想让我知难而退  礼物不需挑最贵  只要香榭的落叶  喔营造浪漫的约会  不害怕搞砸一切  拥有你就拥有全世界セーヌ川の左岸にコーヒーを1杯持っています。あなたの美しさを味わい、リッププリントを残します。フラワーショップの名前が間違っています。 シャンパンの葉がロマンチックなデートを演出する限り、最も高価なものを選ぶ必要があります。すべてを台無しにすることを恐れないでください。あなたには世界があります。</p><!--设置里面内容宽度不然底部滚动不出现-->

     </div>

     <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>

 </body>

 </html>

知识面扩展阅读：CSS3 overflow-x 属性  display显示时要注意块和行，为什么说display是不占位隐藏,visibility是占位隐藏

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>为什么说display是不占位隐藏,visibility是占位隐藏</title>

     <style>

         *{

             font-family: 微软雅黑;

             margin:0px;

         }

         .line1{

             display:none;

             /* visibility:hidden; */

         }    

     </style>

     <script src="jquery.min.js"></script>

 </head>

 <body>

     <span class='line1'>塞纳河畔左岸的咖啡  我手一杯品尝你的美  留下唇印的嘴  花店玫瑰名字写错谁  告白气球风吹到对街  微笑在天上飞  你说你有点难追  想让我知难而退  礼物不需挑最贵  只要香榭的落叶  喔营造浪漫的约会  不害怕搞砸一切  拥有你就拥有全世界</span>

     <span class='line2'>セーヌ川の左岸にコーヒーを1杯持っています。あなたの美しさを味わい、リッププリントを残します。フラワーショップの名前が間違っています。 シャンパンの葉がロマンチックなデートを演出する限り、最も高価なものを選ぶ必要があります。すべてを台無しにすることを恐れないでください。あなたには世界があります。</span>

     <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>

     <button>显示1</button>

     <button>显示2</button>

     <button>显示3</button>

 </body>

 <script>

     // $('button').eq(0).click(function(){

     //     $('.line1').css({'display':'block'});

     // })

     // display显示时要注意块和行

     // $('button').eq(0).click(function(){

     //     $('.line1').css({'display':'inline'});

     // })

     // visibility显示和隐藏

     $('button').eq(0).click(function(){

         $('.line1').css({'visibility':'visible'});

     })

 </script>

 </html>

11种常用css样式学习大结局滚动条与显示隐藏的更多相关文章

  1. 11种常用css样式之表格和定位样式学习

    table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4 ...

  2. 11种常用css样式之鼠标、列表和尺寸样式学习

    鼠标cursor常见样式crosshair;/*十字形状*/cursor:pointer;/*小手形状*/cursor:wait;/*等待形状*/cursor:text;/*默认 文本形状*/curs ...

  3. 11种常用css样式之border学习

    边框border通常简写为"border:1px solid red;"但其实一个完整的border边框其实是由1.border-width/*边框宽度*/,2.border-st ...

  4. 11种常用css样式之background学习

    background如何简写?如何在背景图像不变的情况下,依旧实现页面文字滚动,为之奈何?别担心,快用background-attachment: fixed;/*固定定位*/常用的backgroun ...

  5. 11种常用css样式之开篇文本字体学习

    常见css样式:1.字体与颜色2.背景属性3.文本属性4.边框属性5.鼠标光标属性6.列表样式7.定位属性8.内外边距9.浮动和清除浮动10.滚动条11.显示和隐藏 文本:1.letter-spaci ...

  6. 获取jQuery对象的第N个DOM元素 && table常用css样式

    获取jQuery对象的第N个DOM元素 1.$(selector).get(N-1) 2.$(selector)[N-1] 注意:.index()方法返回的是一个数,相当于C#中的IndexOf() ...

  7. Day 31：CSS选择器、常用CSS样式、盒子模型

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. html之CSS样式学习笔记

    本文内容: 字体样式 文本样式 背景样式 尺寸样式 盒子模型 边框样式 边距样式 浮动布局 定位布局 [CSS3]伸缩布局 标签显示方式 列表样式 [CSS3]过渡样式 [CSS3]变换样式之2D变形 ...

  9. 常用css样式(布局)

    兼容css3新属性 在css3中,我们可以使用prefixfree.min.js这个插件来自动为css3的相关属性加上兼容浏览器属性,使我们不用为每个css3新属性再加上属性(需要用到大量css3的项 ...

随机推荐

  1. Wordpress4.9.6 任意文件删除漏洞复现分析

    第一章 漏洞简介及危害分析 1.1漏洞介绍 WordPress可以说是当今最受欢迎的(我想说没有之一)基于PHP的开源CMS,其目前的全球用户高达数百万,并拥有超过4600万次的超高下载量.它是一个开 ...

  2. Qt Installer Framework翻译(4)

    教程:创建安装程序 本教程描述如何为一个小项目创建一个简单的安装程序: 本节描述创建安装程序所必须完成的步骤: 创建一个包文件夹,其中将包含所有配置文件和可安装的包. 创建一个配置文件,其中包含有关如 ...

  3. 【java面试】线程篇

    1.什么是线程? 线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运作单位. 2.线程和进程有什么区别? 线程是进程的子集,一个进程可以有很多线程,每条线程并行执行不同的任 ...

  4. AI领域有什么职业？怎样才能在AI领域找到工作？

    AI领域是一个很吃香的行业,在这个行业中,很多人都是高薪的,而且有些学生为了以后能够接触到这个行业,都在大学的时候,学习这个专业,那么大家知道AI领域有什么职业吗?下面我们就来给大家讲解一下. 1.算 ...

  5. Python读取字典(Dictionary)内数据的方法

    读取json后,数据类型为字典,对字典内数据的提取又有不同的方法,根据不同的字典类型 上图可以看到有”[]”,”{}” python语言最常见的括号有三种,分别是:小括号( ).中括号[ ]和大括号也 ...

  6. Day10-Python3基础-协程、异步IO、redis缓存、rabbitMQ队列

    内容目录: Gevent协程 Select\Poll\Epoll异步IO与事件驱动 Python连接Mysql数据库操作 RabbitMQ队列 Redis\Memcached缓存 Paramiko S ...

  7. ios--->NSNotificationCenter传值

    object实现 //在发送通知时设置object参数 [[NSNotificationCenter defaultCenter] postNotificationName:@"ThisIs ...

  8. HDU-2841 Visible Trees(莫比乌斯反演)

    Visible Trees 传送门 解题思路: 实际上的答案就是1~n与1~m之间互质的数的对数,写出式子就是 \(ans=\sum^{n}_{i=1}\sum^{m}_{j=1}[gcd(i,j)= ...

  9. java web 项目中基础技术

    1. 选择版本控制器(git, svn) 2. 用户登录的时候, 你需要进行认证, 权限受理 可以使用 spring shiro 框架,进行上面的工作 3. 过滤器(filter),监听器(liste ...

  10. Leetcode 题目整理-1

    1. Two Sum Given an array of integers, return indices of the two numbers such that they add up to a ...