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. Javascript: 动态显示进度条

    {% if not config.exec_id == '' %} <br /> <div class="progress"> <div class= ...

  2. 【Nginx】进程模型

    转自:网易博客 服务器的并发模型设计是网络编程中很关键的一个部分,服务器的并发量取决于两个因素,一个是提供服务的进程数量,另外一个是每个进程可同时处理的并发连接数量.相应的,服务器的并发模型也由两个部 ...

  3. 你不知道的JavaScript--Item34 大白话解说Promise

    去年6月份. ES2015正式公布(也就是ES6.ES6是它的乳名),当中Promise被列为正式规范.作为ES6中最重要的特性之中的一个,我们有必要掌握并理解透彻.本文将由浅到深,解说Promise ...

  4. Python基础--基本文件操作

    全部的编程语言都一样,学完了一些自带的数据机构后,就要操作文件了. 文件操作才是实战中的王道. 所以,今天就来分享一下Python中关于文件的一些基本操作. open方法 文件模式 这个模式对于写入文 ...

  5. HttpClient的Post和Get訪问网页

    一.基础JAR包 Mavenproject下pom.xml需配置的jar包 <dependencies> <dependency> <groupId>junit&l ...

  6. ACdream区域赛指导赛之手速赛系列(7)

    A -Dragon Maze Time Limit: 2000/1000MS (Java/Others)Memory Limit: 128000/64000KB (Java/Others) Submi ...

  7. 1250 Fibonacci数列

    1250 Fibonacci数列  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Description 定义:f ...

  8. 一次次迭代 百度语音生成 api 字幕 语音的同步性 关键

    发音字符 数一样 D:\myv\semHAND9myuid1523961381.avi 0.7053863117786668 --------------- 深圳市雅超服饰有限公司是一家专业设计制作高 ...

  9. Algorithmic Crush

    evendra在9号云上看到了他的教练朝他微笑. 每次教授选出Devendra单独问他一个问题,Devendra朦胧的头脑里全是他的教练和她的微笑,以至于他无法专注于其他事情.帮助他解决这个问题: 给 ...

  10. Unix域套接字（Unix Domain Socket）介绍【转】

    本文转载自:http://blog.csdn.net/roland_sun/article/details/50266565 版权声明:本文为博主原创文章,未经博主允许不得转载. 在Linux系统中, ...