CSS——元素的显示与隐藏
元素的显示与隐藏
在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display visibility 和 overflow。
他们的主要目的是让一个元素在页面中消失,但是不在文档源码中删除。 最常见的是网站广告,当我们点击类似关闭不见了,但是我们重新刷新页面,它们又会出现和你玩躲猫猫!!
display 显示
display 设置或检索对象是否及如何显示。
display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外,同时还有显示元素的意思。
特点: 隐藏之后,不再保留位置。
visibility 可见性
设置或检索是否显示对象。
visible : 对象可视
hidden : 对象隐藏
特点: 隐藏之后,继续保留原有位置。(停职留薪)
overflow 溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible : 不剪切内容也不添加滚动条。
auto : 超出自动显示滚动条,不超出不显示滚动条
hidden : 不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll : 不管超出内容否,总是显示滚动条
CSS——元素的显示与隐藏的更多相关文章
- CSS元素的显示与隐藏
CSS元素的显示与隐藏 我们访问某些网站的时候,经常可以看到一些广告弹出来,点击关闭就不见了,但是重新刷新页面后,广告又会重新弹出来.这就是元素的显示和隐藏的一个应用. 1. display属性 di ...
- [CSS]元素的显示与隐藏
摘自:http://www.zhangxinxu.com/wordpress/?p=1528 元素隐藏与显示是我们在页面制作与交互效果实现中非常常见的,如果您只是使用display:none与disp ...
- 认识CSS中高级技巧之元素的显示与隐藏
前端之HTML,CSS(八) CSS高级技巧 元素的显示与隐藏 CSS中有三个属性可以设置元素的显示于隐藏,分别是:display.visibility和overflow. display 隐藏元素: ...
- css控制div显示/隐藏方法及2种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么)
css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么) 一.总结 一句话总结:使用的时候直接在元素的样式中设置display和visibility属性即可.推荐使 ...
- 微信小程序点击控制元素的显示与隐藏
微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view cla ...
- react中控制元素的显示与隐藏
1.通过 state 变量来控制是否渲染元素 类似于 vue 的 v-if 方法是通过变量来控制是否加载元素的,如果变量为false,内容就直接不会渲染的. class Demo extends Re ...
- JS控制HTML元素的显示和隐藏
JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...
- 控制HTML元素的显示与隐藏——display和visibility
有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现.通过下面的例子了解display和visibility的区别,简单的例子代 ...
随机推荐
- php导出csv并保存在服务器,返回csv的文件路径
<?php namespace app\common\controller; use think\Controller; use think\Db; class Csv extends Cont ...
- 日文NLP分词系统
mecab(http://mecab.sourceforge.net/)是奈良先端科技大学开发的日文分词系统,基于CRF的分词原理,有c++实现,提供python.perl.ruby等接口 日文NLP ...
- 【SGU194】Reactor Cooling
题目大意 给定一个无源无汇的网络,边的容量有上下界限制,试构造一个合理的流量. 题目分析 求无源汇上下界的可行流模板题. ①增加一个附加源和汇\(S,T\). ②把每个节点的\(\sum b_{u,i ...
- bzoj1036题解
[解题思路] 直接上树剖套线段树/BIT即可.复杂度o(n+qlog22n)(线段树)或o(n+qlog23n)(BIT). [参考代码] 树剖套BIT.(这个树剖好naive啊QAQ) #inclu ...
- NX二次开发-UFUN获取直线的两个端点UF_CURVE_ask_line_data
NX9+VS2012 #include <uf.h> #include <uf_obj.h> #include <uf_ui.h> UF_initialize(); ...
- Spring-Security (学习记录一)--登录
目录 创建maven工程 1. 在pom.xml中加入相关jar包的配置 2.添加spring-security.xml文件 3.新建admin和user文件夹 4.配置web.xml文件 5.访问 ...
- go beego
一. 引入 go get github.com/astaxie/beego go get gitgub.com/beego/bee go get -u gitxxx.... 更新框架 编写 packa ...
- (转)HashSet<T>类
转载于:http://www.importnew.com/6931.html HashSet<T>类主要是设计用来做高性能集运算的,例如对两个集合求交集.并集.差集等.集合中包含一组不重复 ...
- 三极管NPN和PNP开关电路
0. 总结 NPN适合做低端驱动,即PN结在下面(低端),发射极E接地. PNP适合做高端驱动,即PN结在上面(高端),发射极E接VCC. Tips:标箭头的PN结,中间的是基极B,外头是E极. 1. ...
- Function Run Fun-递归+细节处理
We all love recursion! Don't we? Consider a three-parameter recursive function w(a, b, c): if a < ...