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的区别,简单的例子代 ...
随机推荐
- 第九篇 数据表设计和保存item到json文件
上节说到Pipeline会拦截item,根据设置的优先级,item会依次经过这些Pipeline,所以可以通过Pipeline来保存文件到json.数据库等等. 下面是自定义json #存储item到 ...
- C语言结构体内存分配详情
#include <stdio.h> int main() { /*************************************************** * * 结构体内存 ...
- [转]mybatis-generator 代码自动生成工具(maven方式)
由于MyBatis属于一种半自动的ORM框架,所以主要的工作将是书写Mapping映射文件,但是由于手写映射文件很容易出错,mybatis-gennerator插件帮我们自动生成mybatis所需要的 ...
- JavaScript ---- 原型,原型链(什么是原型)
和“闭包”一样,“原型”这个概念也经常被提起. 其实这个“概念”应该和构造函数,对象放在一起讲,但是由于时间关系,先把这部分抽取出来讲.再讲这个概念时我们先大致了解下JavaScript中的“对象”. ...
- 01二维背包——poj2576
/* 要求把a数组分成两个集合,两个集合人数最多差1,并且元素之和的差尽可能小 那只要把所有可行的列出来即可 01二维背包,即体积是个二维数据,那么我们的背包状态也应该设为二维 dp[j][k]设为 ...
- NX二次开发-UFUN工程图初始化视图信息UF_DRAW_initialize_view_info
NX9+VS2012 #include <uf.h> #include <uf_draw.h> #include <uf_obj.h> #include <u ...
- NX二次开发-NXString转换为char*方法
NX9+VS2012 #include <uf.h> #include <uf_drf.h> #include <NXOpen/Annotations_Note.hxx& ...
- iOS Undefined symbols for architecture armv7:
armv6 iPhone.iPhone 3G iPod 1G.iPod 2G armv7 iPhone 3GS.iPhone 4 iPod 3G.iPod 4G.iPod 5G iPad.iPad 2 ...
- HDU6181-求解次短路-A*或者dijkstra
(有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 题意:传送门 原题目描述在最下面. 次短路裸题. 思路: 在dijstra的过程过维护两个数组变量:\(dis1[],dis2[ ...
- 其它课程中的python---3、numpy总结(非常全)
其它课程中的python---3.numpy总结(非常全) 一.总结 一句话总结: 学习方式应该是:听课+总结:-->找总结博客+再总结 需要始终记住:凭借,继承,复用 1.numpy的主要功能 ...