display: none; 隐藏元素，不占用其本来空间------对应元素显示用的是display:block;

visibility: hidden；元素隐藏，占用其本来的页面空间---------对应隐藏内容显示用visibility: visible;

可视

visibility:hidden/visible/inherit/initial;

visible:元素可视；

hidden:元素不可视（仍占用空间）

inherit:继承父元素的可视性

display：inline-block/block/none/

css中display:none与visibility: hidden的区别的更多相关文章

  1. 个人收集（转载）CSS中 display:none和visibility:hidden的区别

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

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

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

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

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

  4. display:none;与visibility:hidden;的区别

    visibility:隐藏对应的元素但不挤占该元素原来的空间.display:隐藏对应的元素并且挤占该元素原来的空间. 下面来看visibility和dispaly的一些参数 visibility用来 ...

  5. display:none和visibility:hidden的区别？

    css控制元素不可见的方法 { display: none; /* 不占据空间,无法点击 */ } /************************************************* ...

  6. 前端面试题-display:none和visibility:hidden的区别

    一.display:none和visibility:hidden的区别 1.1 空间占据 1.2 回流和渲染 1.3 株连性 二.空间占据 display:none 隐藏后的元素不占据任何空间,而 v ...

  7. display:none与visibility: hidden的区别

    display:none和visibility: hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失. ...

  8. display:none和visibility:hidden的区别[]

    display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能,但两者有所区别,我发现使用 visibility:hidden属性会使对象不可见,但该对象在网页所占的空 ...

  9. CSS属性中display="none“与visibility="hidden"的不同

    display="none",元素会从页面移除,不在页面占用位置,当某个元素设置为display="none"时,这个元素后面的元素会移动上来 visibili ...

随机推荐

  1. 转载：编译安装Nginx（1.4）《深入理解Nginx》（陶辉）

    原文:https://book.2cto.com/201304/19617.html 安装Nginx最简单的方式是,进入nginx-1.0.14目录后执行以下3行命令:./configuremakem ...

  2. javascript 练习题目答案1

    以下是这个教程的答案 https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143 ...

  3. Route pattern cannot reference variable name more than once

    在用 Laravel Backpack 写一个定制化的 CRUD 页面.例如,一个指定店铺所拥有的商品的 CRUD 页面. 起初路由我是这样写的 CRUD::resource('products-of ...

  4. WCF简介-01

    WCF Windows Communication Foundation 1.1 新建一个"空白解决方案" 1.2 在解决方案中添加类库IBLL 1.2.1 添加接口IUserIn ...

  5. MyEclipse中把JSP默认编码改为UTF-8

    在MyEclispe中创建Jsp页面,Jsp页面的默认编码是“ISO-8859-1”,如下图所示: 在这种编码下编写中文是没有办法保存Jsp页面的,会出现如下的错误提示: 因此可以设置Jsp默认的编码 ...

  6. #ECMASCRIPT6笔记

    ECMASCRIPT6笔记 来源于http://es6.ruanyifeng.com/#docs/proxy 是我在阅读时做下的笔记,方便以后查阅 Symbol ES5 的对象属性名都是字符串,这容易 ...

  7. 【C++ Primer 第7章】定义抽象数据类型

    参考资料 1. C++Primer #7 类 Sales_data类 Sales_data.h #include<iostream> #include<string> clas ...

  8. Android APN

    https://www.cnblogs.com/sishuiliuyun/p/3754516.html android系统把所有的APN都保存在数据库中,数据库绝对路径:/data/data/com. ...

  9. socket.shutdownOutput()方法

    我在用客户端给服务端发报文的时候,一开始客户端没有调用这个方法,结果服务端使用SAX解析报文的时候,public void endDocument() throws SAXException总是得不到 ...

  10. Python yaml处理

    安装方式: pip install pyyaml 一.module.yaml为 name: Tom Smith age: 37 spouse: name: Jane Smith age: 25 chi ...