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的区别,简单的例子代 ...
随机推荐
- undefined reference to `TTF_Init'
如果编译时遇上 undefined reference to `FunctionName' 或是这种类似错误,首先就得检查是不是函数名拼写错误,如果不是,那估计是编译时候有些链接库没加进去 比如这篇上 ...
- ARM 汇编 内存访问指令
一. 单个寄存器操作读写内存 内存访问指令格式:<opcode><cond> Rd, [Rn] Rn 中保存的是一个内存的地址值 1. 内存写指令 [ str,strb,st ...
- cookie、session、sessionStorage和localStorage
摘抄并整理后查 cookie 和 session 一般用来跟踪浏览器的用户身份 Session的存储方式 1. 使用cookie:保存 session id 的方式可以采用 cookie,这样在交互过 ...
- 数据转换--替换值(replace函数)
替换值 replace函数 data=Series([1,-999,2,-999,-1000,3]) data Out[34]: 0 1 1 -999 2 2 3 -999 4 -1000 5 3 d ...
- k8s 命令
Kubernetes 常用安装和使用命令总结 获取所有命名空间上的pod kubectl get pod -o wide --all-namespaces 查看pod IP时使用 kubectl ge ...
- windows下安装jenkins初级(2)
这里是基于gitlab拉取代码 gitlab暂时先不多介绍 我们需要把git和gitlab连接起来方便拉取代码 所以需要git的ssh公匙和私匙 首先在 https ...
- lua redis 操作
https://redis.io/commands/keys 遍历redis里面的所有key ,还能进行模糊匹配, 这样就省去了对key的手动过滤了 比如 keys term_info* ) &quo ...
- 搜索进阶课件,视频,代码(状态压缩搜索,折半搜索,dfs,bfs总结)
链接:https://pan.baidu.com/s/1-svffrprCOO4CtQoCTQ9hQ 提取码:h909 复制这段内容后打开百度网盘手机App,操作更方便哦
- 区别 |DCL |DDL |DML |DQL
DCL(Data Control Language)数据控制语言: 用来设置或更改数据库用户或角色权限的语句,包括(grant,deny,revoke等)语句.这个比较少用到. 对于大多数人,在公司一 ...
- bzoj1002题解
[题意分析] 给你一张特殊的,被称为“轮状基”的无向图,求其生成树个数. [解题思路] 引理: 基尔霍夫矩阵: 基尔霍夫矩阵=度数矩阵-邻接矩阵(邻接矩阵权=两点连边数) Matrix-Tree定理: ...