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. 所有在Linux系统下 arp -d $ip 命令只能清除一个IP地址的对应MAC地址缓存，可以使用组合命令操作。

    https://blog.csdn.net/u011641885/article/details/48175239 https://blog.csdn.net/zj0910/article/detai ...

  2. POJ 1475 推箱

    推箱 时限:n.2000MS   内存限制:n.131072K 提交材料共计: 6600   接受: 2263   特别法官 描述 想象一下你站在一个二维迷宫里,由方形细胞组成,它们可能或可能不会充满 ...

  3. Ubuntu 16.04安装indicator-sysmonitor实现导航条显示上下行网速/CPU/内存使用率

    安装: sudo add-apt-repository ppa:fossfreedom/indicator-sysmonitor sudo apt-get update sudo apt-get in ...

  4. Performance Tunning - OCP

    This artical is forcused on Oracle 11g Release 2.  It is an summary from the OCP documentation. The ...

  5. 通用的Adapter

    activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...

  6. MySQL用户及数据安全专题

    1 简单介绍 1.1 概要 1.2 权限分类 2 加入用户     2.1 语法例如以下: CREATE USER user_specification [, user_specification] ...

  7. Servlet-SrpingMVC 生成验证码

    在SpringMVC中配置生成验证码: import org.springframework.stereotype.Controller; import org.springframework.web ...

  8. TwoSum leetcode

    class Solution { public: vector<int> twoSum(vector<int>& nums, int target) { vector& ...

  9. AngularJS入门学习

    初识: {{}}   这种双层花括号的语法称之为:插值语法:也可以说是 标识符:AngularJS 主要就是使用这种方法进行数据绑定 ng-module="name"   在ng的 ...

  10. 第二章、Tiny4412 U-BOOT移植二 启动分析【转】

    本文转载自:http://blog.csdn.net/eshing/article/details/37521481 版权声明:本文为博主原创文章,未经博主允许不得转载. 一.启动过程说明 讲解启动过 ...