元素的显示与隐藏

在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显示／隐藏方法及２种方法比较原码 - 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. P3410 /// 最大流最小割

    题目大意: https://www.luogu.org/problemnew/show/P3410 题解 https://www.cnblogs.com/2020pengxiyue/p/9463055 ...

  2. Install .NET Core Runtime on Linux Ubuntu 16.04 x64

    原文链接https://www.microsoft.com/net/download/linux-package-manager/ubuntu16-04/runtime-current nstall ...

  3. 2019-9-2-win10-uwp-布局

    title author date CreateTime categories win10 uwp 布局 lindexi 2019-09-02 12:57:38 +0800 2018-2-13 17: ...

  4. pip3 常用操作

    清华大学pip镜像 https://mirrors.tuna.tsinghua.edu.cn/help/pypi/ # 设置为默认 pip install pip -U pip config set ...

  5. 常用的Docker镜像及处理命令

    常用的镜像命令 docker run -d --name dockerui -p : -v /var/run/docker.sock:/var/run/docker.sock abh1nav/dock ...

  6. C语言 常量

    常量的定义:在运行过程中,其值不能改变的量称为常量. 常量的分类 整型常量  实型常量  字符常量 demo #include <stdio.h> void main() { printf ...

  7. 使用osgearth2.9 rex引擎在Qt中黑屏的问题修复

    将osgUtil::RenderStage.cpp中的下列红色代码注释重新编译即可: if ( !colorAttached ) { setDrawBuffer( GL_NONE, true ); s ...

  8. ps去除元素的三种常用方法

    1.仿制图章工具,alt+鼠标左键进行选取复制区域,然后左键点击需要覆盖的区域. 2.套锁工具--选择区域--右键填充--内容识别.     3.修补工具,选中区域--拖动适配.     附带另一份较 ...

  9. Dart编程数字Number

    Dart数字可以分为: int - 任意大小的整数. int 数据类型用于表示整数. double -64位(双精度)浮点数,由IEEE 754标准规定. 在 double 数据类型用于表示小数 in ...

  10. NX二次开发-如何在类外面定义一个结构体

    #include <uf.h> #include <uf_obj.h> #include <uf_part.h> using namespace NXOpen; u ...