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. android中listview点击事件的监听实现

    listview_bookmark.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public vo ...

  2. loginitem

    + (BOOL) willStartAtLogin:(NSURL *)itemURL { Boolean foundIt=false; LSSharedFileListRef loginItems = ...

  3. Ubuntu中LightDM是什么（转）

    LightDM(Light Display Manager)是一个全新的轻量级Linux桌面显示管理器,而传统的Ubuntu是使用GNOME桌面标准的GDM. LightDM是一个跨桌面显示管理器,其 ...

  4. 复习es6-解构赋值+字符串的扩展

    1. 数组的解构赋值 从数组中获得变量的值,给对应的声明变量赋值,,有次序和对应位置赋值 解构赋值的时候右边必须可以遍历 解构赋值可以使用默认值 惰性求值,当赋值时候为undefined时候,默认是个 ...

  5. 1. 青蛙跳跳FrogJmp Count minimal number of jumps from position X to Y.

    青蛙跳跳: package com.code; public class Test03_1 { public int solution(int X, int Y, int D) { int res = ...

  6. tomcat管理员password设置

    打开tomcat安装文件夹下的conf,然后打开tomcat-users.xml 在标签中加入 <user name="" password="" rol ...

  7. iOS页面右滑返回的实现方法总结

    1.边缘触发的系统方法 ①系统返回按钮 self.navigationController.interactivePopGestureRecognizer.enabled = YES;  ②自定义返回 ...

  8. 百度开放云java+tomcat部署web项目-小皇帝詹姆斯

    加入部署 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/diss ...

  9. Tcl学习之--命名空间

    Tcl解释器将全部的命令和全局变量分组管理.这些小组称为命名空间,一个命名空间中的命令和变量不会影响到还有一个命名空间.这些命名空间呈树形组织.一个命名空间的命令能够被还有一个命名空间引入.命名空间树 ...

  10. Git下的冲突解决【转】

    本文转载自:http://www.cnblogs.com/sinojelly/archive/2011/08/07/2130172.html 冲突的产生 很多命令都可能出现冲突,但从根本上来讲,都是m ...