元素的显示与隐藏

在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. python--面向对象:多态与封装

    一.多态 :python 天生支持多态多态指的是一类事物有多种形态 eg:文件有多种形态:文本文件,可执行文件鸭子类型:python中崇尚鸭子类型,不崇尚根据继承所得来的相似 优点 : 松耦合 每个相 ...

  2. leetcode-159周赛-5232-替换子串得到平衡字符串*

    题目描述: 方法: 另: class Solution: def balancedString(self, s: str) -> int: n, req = len(s), len(s) // ...

  3. DIV内容超出固定宽度部分用省略号代替

    方法一:CSS控制溢出文本  只针对DIV单行数据展示 /** DIV文本超出宽度部分用...替换,鼠标移上显示全部 **/ .textAuto{overflow:hidden;text-overfl ...

  4. bzoj1006题解

    [题意分析] 给你一张弦图,求图的最小染色数. [解题思路] 这篇讲稿已经讲得很详尽了.. 直接求完美消除序列,然后倒着染色即可.复杂度O(n2+nm). [参考程序] 求完美消除序列我是用的MCS( ...

  5. NX二次开发-算法篇-冒泡排序(例子:遍历所有点并排序)

    NX9+VS2012 #include <uf.h> #include <uf_ui.h> #include <uf_curve.h> #include <u ...

  6. csp-s模拟测试96

    csp-s模拟测试96 $T1$一眼慢速乘,$T2$稍证一手最优性尝试用神奇数据结构优化,无果,弃.$T3$暴力+信仰. 100 03:16:38 95 03:16:56 35 03:17:10 23 ...

  7. Linux date命令 crontab每个月最后一天

    ###使用date获取日期时间等 # 当前日期 openstack@ubuntu:~$ date 2019年 01月 15日 星期二 15:10:49 CST # 明天 openstack@ubunt ...

  8. random,time,sys,os,序列化模块

    random模块(随机数模块) 取随机小数: random.random() 取0-1之间的小数 random.uniform(x, y) 取x-y之间的小数 取随机整数: random.randin ...

  9. (转)python:Redirection is not supported

    Redirection isnot supported. 不支持重定向 解决方法: cmd: 在CMD命令行中,输入 "python" + "空格",即 &qu ...

  10. Sigils of Elohim

    题目大意 见游戏链接https://store.steampowered.com/app/321480/. 分析 作为一个程序猿,我拒绝用人脑dfs. 代码如下 #include <bits/s ...