CSS——样式隐藏
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——样式隐藏的更多相关文章
- css样式---隐藏元素
1.通过设置width:0;或height:0 2.将元素的opacity设置成0 3.通过定位将元素移出屏幕范围 4.通过text-indent实现隐藏文字的效果 5.通过z-index隐藏一个元素 ...
- 通过CSS样式隐藏百度版权标志
在JSP中添加: //隐藏所有.anchorBL{ display:none; } //隐藏下方的保留百度地图图片 .BMap_cpyCtrl{ display:none; } 注:维护他人版权, ...
- CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法
CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...
- 11种常用css样式学习大结局滚动条与显示隐藏
滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...
- 用JS改变的元素CSS样式，css里display :none 隐藏 block 显示
CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式:方法一:document.divs.style. ...
- jQuery修改class属性和CSS样式
jQuery修改class属性和CSS样式 class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个c ...
- bootstrap-全局css样式
bootstrap-全局css样式 1.bootstrap是一个前端框架 2.基本模板:viewport视口可以解决移动端设备网页自适应问题 3.版心(.container) 流式版心(.con ...
- CSS样式自动换行(强制换行)与强制不换行
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素,正常文字的换行(亚洲文字和非亚洲文字)元素拥 ...
- Bootstrap3 CSS样式基本用法总结
按钮 a,input,button都可以设置为按钮 a标签按钮 button标签按钮 <a class="btn btn-default" href="#&qu ...
随机推荐
- 生成随机数验证码的工具类（from韩顺平）
生成随机数验证码的工具类 package com.cx; //生成随机数的图片 import java.awt.Color; import java.awt.Font; import java.awt ...
- Node: 在Mac中离线安装Sqlite3
最近在安装db-migrate的时候,有一个依赖包sqlite3怎样都安装不了,检查下来应该是由于node_sqlit3.node文件无法从Amazon下载导致(源码安装也报错,没有研究过原因).于是 ...
- 今天開始慢下脚步，開始ios技术知识的查漏补缺。
从2014.6.30 開始工作算起. 如今已经是第416天了.不止不觉.时间过的真快. 通过对之前工作的总结.发现,你的知识面.会决定你面对问题时的态度.过程和结果. 简单来讲.知识面拓展了,你才干有 ...
- 1.4－动态路由协议OSPF①
r2#sh ip ospf border-routers 查看ABR 修改OSPF接口优先级 r1(config)#int e 0 r1(config-if)#ip ospf priority 100 ...
- ViewPager + Handler 实现的图片自己主动轮播
首先上图看效果 我也是在网上看各种大牛们做的效果,非常多都是自己定义重写了一些控件来实现这个效果的. 我把当中的一位大牛写的ViewPager的效果加上了Handler实现了自己主动轮播效果.在此做个 ...
- 关于Tomcat的点点滴滴（体系架构、处理http请求的过程、安装和配置、文件夹结构、设置压缩和对中文文件名称的支持、以及Catalina这个名字的由来……等）
总结Tomcat的体系架构.处理http请求的过程.安装和配置.文件夹结构.设置压缩和对中文文件名称的支持.以及Catalina这个名字的由来--等. Tomcat和JVM: 一个Tomcat仅仅会启 ...
- docker（1）：virtualbox 安装CoreOS系统，配置registry-mirror
本文的原文连接是: http://blog.csdn.net/freewebsys/article/details/51093850 未经博主同意不得转载. 博主地址是:http://blog.csd ...
- struts2 一个CRUD的BaseAction
在struts2 in action中所见,这样封装后省去了大部分crud反复代码.尽管还不能理悟.先记下来. abstract class BaseAction extends ActionSupp ...
- 源代码编译安装MySQL5.6.12具体过程
1 下载安装包download tar.gzwget http://download.csdn.net/detail/mchdba/75450372 安装cmake软件包yum install cm ...
- HDFS03
=====================HDFS数据块(block)===================== 文件被切分成固定大小的数据块 -------------> √默认数据块大小为6 ...