隐藏一个元素可以通过把display属性设置为“none”,或把visibility属性设置为“hidden”。但是请注意,这两种方法会产生不同的效果。

Visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。

display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面

布局中消失。

CSS属性Display(显示)和Visibility(可见性)的更多相关文章

  1. css中的display(显示)和visibility(可见性)

    display定义和用法 display 属性规定元素应该生成的框的类型. 说明 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险, ...

  2. [转]CSS Display(显示) 与 Visibility(可见性)

    CSS Display(显示) 与 Visibility(可见性) display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. 隐藏元素 - display:non ...

  3. CSS:CSS Display(显示) 与 Visibility(可见性)

    ylbtech-CSS:CSS Display(显示) 与 Visibility(可见性) 1.返回顶部 1. CSS Display(显示) 与 Visibility(可见性) display属性设 ...

  4. CSS样式“display:none”与“visibility:hidden”区别

    CSS样式“display:none”和“visibility:hidden”都可以实现将页面元素隐藏,但是具体的效果是有差别的!下面通过两个小实验来说明这种差异. 实验代码: <!DOCTYP ...

  5. CSS的display显示

    CSS的display显示 1. 行内元素和块级元素关系 块级元素:1.标题标签:h1~h6:2.段落标签:p1~p6:3.div:4.列表:等 行内元素:1.span:2.a:3.img:4.str ...

  6. CSS Display(显示) 与 Visibility(可见性)

    display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. Box 1 Box 2 Box 3 隐藏元素 - display:none或visibility:hid ...

  7. Display(显示) 与 Visibility(可见性)

    display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. 隐藏元素 - display:none或visibility:hidden 隐藏一个元素可以通过把dis ...

  8. CSS样式display:none和visibility:hidden的区别

    同样是隐藏,display:none与visibility:hidden有什么区别呢? 虽然display:none与visibility:hidden都能达到隐藏可见元素的作用(视觉上),但事实上, ...

  9. 个人收集(转载)CSS中 display:none和visibility:hidden的区别

    visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏 ...

  10. css中display:none与visibility: hidden的区别

    display: none; 隐藏元素,不占用其本来空间------对应元素显示用的是display:block; visibility: hidden:元素隐藏,占用其本来的页面空间-------- ...

随机推荐

  1. 【react】react-reading-track

    这是一个很有趣的图书阅读demo 先放github地址:https://github.com/onlyhom/react-reading-track 我觉得这个博主的项目很有意思呢 我们一起看看代码啊 ...

  2. mybatis添加数据返回主键

    程序结构图: 表结构: 创表sql: Create Table CREATE TABLE `users` (   `id` int(11) NOT NULL AUTO_INCREMENT,   `us ...

  3. WCF 无管理员权限下启用服务

    1 使用 netsh.exe 工具 C:\Windows\system32>netsh http add urlacl url=http://+:8733/WcfServiceLibrary1 ...

  4. 微信小程序制作选项卡

    wxml: <view class="tab"><view class="tab-title" bindtap="tabFun&qu ...

  5. golang内置函数

  6. python输出最大公约数和最小公倍数

    def myfun(): num1 = int(input('输入num1')) num2 = int(input('输入num2')) list1=[] for i in range(1, max( ...

  7. KiCad 工程用 Git 管理需要忽略哪些文件?

    KiCAD 工程用 Git 管理需要忽略哪些文件? KiCAD 使用的 文本格式,天生可以用 Git 来管理. 但是并非所有文件需要使用 Git 管理,以下文件可以忽略. *.bak fp-info- ...

  8. spring中 使用说明

    在xml配置了这个标签后,spring可以自动去扫描base-pack下面或者子包下面的java文件,如果扫描到有@Component @Controller@Service等这些注解的类,则把这些类 ...

  9. URL编程

    package com.tanlei.URL; import java.io.File; import java.io.FileOutputStream; import java.io.IOExcep ...

  10. LeedCode OJ -- String to Integer (atoi)

    点击打开题目链接 题目意思就是自己实现一个atoi函数,也就是将字符串转换成int型. 关于INT_MAX和INT_MIN, 只是在<limits.h>文件中定义的宏..分别是int型可以 ...