overflow:hidden:  溢出隐藏

visibility:hidden:   隐藏元素    隐藏之后还占据原来的位置。

display:none:      隐藏元素    隐藏之后不占据原来的位置。

Display:block:     元素可见

Display:none  和display:block  常配合js使用。

下面是一个demo，配合的是锚点使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .box,.div1,.div2,.div3{

            width: 300px;

            height: 300px;

        }

        .box{

            overflow: hidden;

        }

        .div1{

            background: red;

        }

        .div2{

            background: green;

        }

        .div3{

            background: pink;

        }

    </style>

</head>

<body>

    <a href="#div1">div1</a>

    <a href="#div2">div2</a>

    <a href="#div3">div3</a>

    <div class="box">

        <div class="div1" id="div1"></div>

        <div class="div2" id="div2"></div>

        <div class="div3" id="div3"></div>

    </div>

</body>

</html>

效果：

CSS——样式隐藏的更多相关文章

  1. css样式---隐藏元素

    1.通过设置width:0;或height:0 2.将元素的opacity设置成0 3.通过定位将元素移出屏幕范围 4.通过text-indent实现隐藏文字的效果 5.通过z-index隐藏一个元素 ...

  2. 通过CSS样式隐藏百度版权标志

    在JSP中添加: //隐藏所有.anchorBL{ display:none; } //隐藏下方的保留百度地图图片 .BMap_cpyCtrl{ display:none; }   注:维护他人版权, ...

  3. CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法

    CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...

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

    滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...

  5. 用JS改变的元素CSS样式，css里display :none 隐藏 block 显示

    CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式:方法一:document.divs.style. ...

  6. jQuery修改class属性和CSS样式

    jQuery修改class属性和CSS样式 class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个c ...

  7. bootstrap-全局css样式

    bootstrap-全局css样式   1.bootstrap是一个前端框架 2.基本模板:viewport视口可以解决移动端设备网页自适应问题 3.版心(.container)  流式版心(.con ...

  8. CSS样式自动换行(强制换行)与强制不换行

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素,正常文字的换行(亚洲文字和非亚洲文字)元素拥 ...

  9. Bootstrap3 CSS样式基本用法总结

    按钮 a,input,button都可以设置为按钮 a标签按钮   button标签按钮 <a class="btn btn-default" href="#&qu ...

随机推荐

  1. Spring + quartz实现定时发送邮件功能

    在做具体的系统管理时,往往会有每隔一段时间发给用户一些邮件的业务,现在参考的网上的大部分代码,写下了我自己的代码. 在ApplicationContext.xml的内容如下: <?xml ver ...

  2. docker重新打包MySQL5.7镜像

    1:先下载MySQL镜像 # docker pull  mysql:5.7   2:运行镜像生成容器 # docker run --name mysql -p 3306:3306 -e MYSQL\_ ...

  3. HDU 1166敌兵布阵

    敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  4. spring-cloud-starter-hystrix（断路器）服务不通或者调用失败后的错误处理和回调

    雪崩效应 在微服务架构中通常会有多个服务层调用,大量的微服务通过网络进行通信,从而支撑起整个系统.各个微服务之间也难免存在大量的依赖关系.然而任何服务都不是100%可用的,网络往往也是脆弱的,所以难免 ...

  5. MyBatis与Spring MVC结合时，使用DAO注入出现：Invocation of init method failed; nested exception is java.lang.IllegalArgumentException: Property 'sqlSessionFactory' or 'sqlSessionTemplate' are required

    错误源自使用了这个例子:http://www.yihaomen.com/article/java/336.htm,如果运行时会出现如下错误: Invocation of init method fai ...

  6. SecureCRT 8.0公布

    百度搜索到的7.3 注冊码生成器还是能够用于8.0的破解. 破解时,选择手动输入(Enter Licence Manually)产生的代码. 添加了一些特性,我最看重的是: 1.  能够在以下命令窗体 ...

  7. Java---15---单例设计模式：---饿汉式和懒汉式

    概念: 单例模式确保某个类仅仅有一个实例.并且自行实例化并向整个系统提供这个实例.   单例模式有下面特点: 1.单例类仅仅能有一个实例 2.单例类必须自己给自己创建自己的唯一实例 3.单例类必须给全 ...

  8. 解决Mysql存储中文的问题

    Mysql无法存储中文或者中文乱码,当然是编码的问题.你可以mysql -u root -p进入Mysql命令行环境,然后输入命令查看当前编码格式: mysql> show variables ...

  9. swift 2.0 语法 常量变量

    import UIKit /*: 常量变量 * 常量: let * 变量: var 完整格式: * 修饰符(let/var) 常量/变量名称: 数据类型 */ let number: Int var ...

  10. 双logo

    from aip import AipSpeech bd_k_l = ['11059852', '5Kk01GtG2fjCwpzEkwdn0mjw', 'bp6Wyx377Elq7RsCQZzTBgG ...