元素的显示与隐藏

在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display visibility 和 overflow。

他们的主要目的是让一个元素在页面中消失,但是不在文档源码中删除。 最常见的是网站广告,当我们点击类似关闭不见了,但是我们重新刷新页面,它们又会出现和你玩躲猫猫!!

display 显示

display 设置或检索对象是否及如何显示。

display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外,同时还有显示元素的意思。

特点: 隐藏之后,不再保留位置。

visibility 可见性

设置或检索是否显示对象。

visible :  对象可视

hidden :  对象隐藏

特点: 隐藏之后,继续保留原有位置。(停职留薪)

overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

visible :  不剪切内容也不添加滚动条。

auto :   超出自动显示滚动条,不超出不显示滚动条

hidden :  不显示超过对象尺寸的内容,超出的部分隐藏掉

scroll :  不管超出内容否,总是显示滚动条

CSS——元素的显示与隐藏的更多相关文章

  1. CSS元素的显示与隐藏

    CSS元素的显示与隐藏 我们访问某些网站的时候,经常可以看到一些广告弹出来,点击关闭就不见了,但是重新刷新页面后,广告又会重新弹出来.这就是元素的显示和隐藏的一个应用. 1. display属性 di ...

  2. [CSS]元素的显示与隐藏

    摘自:http://www.zhangxinxu.com/wordpress/?p=1528 元素隐藏与显示是我们在页面制作与交互效果实现中非常常见的,如果您只是使用display:none与disp ...

  3. 认识CSS中高级技巧之元素的显示与隐藏

    前端之HTML,CSS(八) CSS高级技巧 元素的显示与隐藏 CSS中有三个属性可以设置元素的显示于隐藏,分别是:display.visibility和overflow. display 隐藏元素: ...

  4. css控制div显示/隐藏方法及2种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  5. css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么)

    css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么) 一.总结 一句话总结:使用的时候直接在元素的样式中设置display和visibility属性即可.推荐使 ...

  6. 微信小程序点击控制元素的显示与隐藏

    微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view cla ...

  7. react中控制元素的显示与隐藏

    1.通过 state 变量来控制是否渲染元素 类似于 vue 的 v-if 方法是通过变量来控制是否加载元素的,如果变量为false,内容就直接不会渲染的. class Demo extends Re ...

  8. JS控制HTML元素的显示和隐藏

    JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...

  9. 控制HTML元素的显示与隐藏——display和visibility

    有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现.通过下面的例子了解display和visibility的区别,简单的例子代 ...

随机推荐

  1. cmake 支持-lpthread

    set(CMAKE_BUILD_TYPE "Release") if( CMAKE_BUILD_TYPE STREQUAL "Debug" )    set(C ...

  2. 干货满满!10分钟看懂Docker和K8S

    2010年,几个搞IT的年轻人,在美国旧金山成立了一家名叫“dotCloud”的公司. 这家公司主要提供基于PaaS的云计算技术服务.具体来说,是和LXC有关的容器技术. LXC,就是Linux容器虚 ...

  3. MapReduce计算原理及步骤

    步骤:input从HDFS读取内容, split()切割分片内容,key/value, map()方法对输入的key/value进行计算处理,先写到内存,在内存中进行分区.排序,之后将Key/valu ...

  4. thinkphp Widget扩展

    Widget扩展一般用于页面组件的扩展.大理石平台规格 举个例子,我们在页面中实现一个分类显示的Widget,首先我们要定义一个Widget控制器层 CateWidget,如下: namespace ...

  5. Java中的线程Thread方法之---interrupt()

    前几篇都介绍了Thread中的几个方法,相信大家都发现一个相似点,那就是sleep,join,wait这样的阻塞方法都必须捕获一个InterruptedException异常,顾名思义就是一个线程中断 ...

  6. 求最长的任意两元素差不超过M的子段——双指针+单调队列hdu4123

    换根dp的部分比较容易,难点在于求求最长的任意两元素差不超过M的子段 首先会想到双指针维护(尺取法),如果p1,p2间的max-min>M,那么p1向右移动,直到p1,p2间的max-min&g ...

  7. 2019hdu第二场

    10:签到求n!取模 #include <iostream> #include <iterator> #include <algorithm> typedef lo ...

  8. NX二次开发-UFUN特征找体UF_MODL_ask_feat_body

    NX11+VS2013 #include <uf.h> #include <uf_modl.h> UF_initialize(); //创建块 UF_FEATURE_SIGN ...

  9. NX二次开发-UFUN导入表达式UF_MODL_import_exp

    最近在做表达式创建,发现UFUN的创建表达式函数UF_MODL_create_exp,UF_MODL_create_exp_tag没有办法创建字符串类型的表达式,例如AA="BB" ...

  10. mysql最新版与mysql5.6的兼容问题

    最近公司在给别的企业打了一个项目,在公司本地使用的是mysql 5.6,但是搭建的项目的mysql版本是最新版5.7以后吧,所以有些sql在执行上出了一点问题 目前发现的是: 1: 在5.6版本下先o ...