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. [K/3Cloud] K/3 Cloud1.0怎样和2.0共存在一台服务器上

    第一步:安装Cloud1.0,创建管理中心,创建业务数据中心,备份管理数据库和业务数据库,并且备份安装目录: 第二步:卸载Cloud1.0,清理安装目录,安装Cloud2.0,创建管理中心,创建业务数 ...

  2. Java高级应用之泛型与反射

    /*************************************************************************************************** ...

  3. BZOJ(6) 1084: [SCOI2005]最大子矩阵

    1084: [SCOI2005]最大子矩阵 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3566  Solved: 1785[Submit][Sta ...

  4. fast recovery area

    First of all, the version of my enviroment is Oracle 11.0.2.3. The fast recovery area used to be cal ...

  5. 相当精简的CentOS个人桌面版－－从CentOS6.3 32b-mini版開始(mini版过程略)

    利用网络实现相当精简的CentOS个人桌面版--从CentOS6.3 32位mini版開始(mini版过程略).升级后即是CENTOS6.5. 特别感谢163网易的镜像空间［http://mirror ...

  6. 完美解决EditText和ScrollView的滚动冲突（上）

    在网上搜了一下EditText和ScrollView的滚动冲突,发现差点儿全部的解决方式都是触摸EditText的时候就将事件交由EditText处理,否则才将事件交由ScrollView处理.这样确 ...

  7. 微软的技术态度 -- 从其对于CRT的设计考虑说起(Thought on the CRT - What Microsoft Prefers)

    很多人从C语言学习过来的人都知道,在编写程序时用到的像printf这样的函数,是作为该语言标准库函数提供的,这也是C语言标准中规定的内容.因此,操作系统必须对其保持一定程度上的透明,也就是说,作为一个 ...

  8. 【bzoj1002】 [FJOI2007]轮状病毒DP

    递推+环状特殊处理+高精度   #include<algorithm> #include<iostream> #include<cstdlib> #include& ...

  9. E - 吃糖

    题目描述: 某人买了n兜糖果,第i兜有Ai块糖.此人把所有这些糖果用一个数字标记起来:他这样标记这些糖,第一袋糖用用数字1到A1,第二袋糖用数字A1+1到A1+A2,如此类推.如果还没明白看样例可以更 ...

  10. Git新建本地分支与远程分支关联问题：git branch --set-upstream【转】

    本文转载自:http://blog.csdn.net/netwalk/article/details/21088405 Git新建本地分支与远程分支关联问题:git branch --set-upst ...