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

时间：2022-09-06 10:27:36

visibility和display两个属性都有隐藏元素的功能，display:none和visibility:hidden的区别，简单的总结一句话就是：visibility:hidden隐藏，但在浏览时保留位置；而display:none视为不存在，且不加载！

1、visibility:hidden--为隐藏的对象保留其物理空间
HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。
 
2、display: none--不为被隐藏的对象保留其物理空间
HTML元素（对象）的宽度、高度等各种属性值都将“丢失”
实例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<table>
    <tr>
   <td>
    <table border="1">
    <tr>
     <td>第一行</td>
    </tr>
    <tr style="display:none">
     <td>第二行</td>
    </tr>
    <tr>
     <td>第三行</td>
    </tr>
    </table>
   </td>
   <td>
    <table border="1">
    <tr>
     <td>第一行</td>
    </tr>
    <tr style="visibility:hidden">
     <td>第二行</td>
    </tr>
    <tr>
     <td>第三行</td>
    </tr>
    </table>
   </td>
  </tr>
  <tr>
   <td>style="display:none"</td>
   <td>style="visibility:hidden"</td>
  </tr>
</table>
</body>
</html>
结果如下：
个人收集（转载）CSS中 display:none和visibility:hidden的区别

个人收集（转载）CSS中 display:none和visibility:hidden的区别的更多相关文章

  1. css中display&colon;none与visibility&colon; hidden的区别

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

  2. CSS样式display&colon;none和visibility&colon;hidden的区别

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

  3. CSS样式&OpenCurlyDoubleQuote;display&colon;none”与&OpenCurlyDoubleQuote;visibility&colon;hidden”区别

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

  4. display&colon;none&semi;与visibility&colon;hidden&semi;的区别

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

  5. display&colon;none和visibility&colon;hidden的区别？

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

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

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

  7. display&colon;none与visibility&colon; hidden的区别

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

  8. display&colon;none和visibility&colon;hidden的区别&lbrack;&rsqb;

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

  9. CSS属性中display&equals;&quot&semi;none&OpenCurlyDoubleQuote;与visibility&equals;&quot&semi;hidden&quot&semi;的不同

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

随机推荐

  1. Winform绑定数据源的几种方式？

    第一种:DataSet ds=new DataSet (); this.dataGridView1.DataSource=ds.Table[0]; 第二种:DataTable dt=new DataT ...

  2. 【转载】Oracle 11g R2 for Win7旗舰版（64位）- 安装

    免责声明:     本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除.     原文作者:bluepoint2009      原文地址:http://www.cnbl ...

  3. session共享，格式json，php不能简单的设置session&period;serialize&lowbar;handler&equals;json&comma;目前只有php，wddx&lpar;xml&rpar;&comma;安装扩展后还有igbinary&lpar;二进制&rpar;

    即使session_save_handler被自己的类或者方法重写,write与read的出入数据都还是被序列化的,而且被session序列化不是一般的序列化...还是不能解解决memcached保存 ...

  4. 最简单的视音频播放示例5：OpenGL播放RGB&sol;YUV

    本文记录OpenGL播放视频的技术.OpenGL是一个和Direct3D同一层面的技术.相比于Direct3D,OpenGL具有跨平台的优势.尽管在游戏领域,DirectX的影响力已渐渐超越OpenG ...

  5. 微软有完善的WP开发教程

    微软的Windows Phone 开发者中心 地址:http://dev.windowsphone.com/zh-cn/develop由于这里的教程非常完善,大家直要把开发者中心的内容看完就可以了,所 ...

  6. L2TP

    点击查看详情>>   我的贡献 |退出 L2TP 编辑词条 L2TP是一种工业标准的Internet隧道协议,功能大致和PPTP协议类似,比如同样可以对网络数据流进行加密.不过也有不同之处 ...

  7. 【BZOJ 2844】&colon; albus就是要第一个出场

    题目大意: 给一个长度为n的序列,将其子集的异或值排序得到B数组,给定一个数字Q,保证Q在B中出现过,询问Q在B中第一次出现的下标. 题解: 感觉和hdu3949第K小异或值有一像,然而发现要求出现次 ...

  8. js中的 Table 对象

    Table 对象Table 对象代表一个 HTML 表格.在 HTML 文档中 <table> 标签每出现一次,一个 Table 对象就会被创建. Table 对象集合cells[]    ...

  9. org&period;apache&period;axis2&period;AxisFault&colon; org&period;apache&period;axis2&period;databinding&period;ADBException&colon; Unexpected subelement profile

    原创:转载请注明出处 1.异常情况 org.apache.axis2.AxisFault: org.apache.axis2.databinding.ADBException: Unexpected ...

  10. 多媒体基础知识之PCM数据

    1.什么是PCM音频数据 PCM(Pulse Code Modulation)也被称为脉冲编码调制.PCM音频数据是未经压缩的音频采样数据裸流,它是由模拟信号经过采样.量化.编码转换成的标准的数字音频 ...

相关文章