写在前面

在群里有朋友问这样一个问题，display:none的标签，影响了布局。这就引出了本篇这样的问题，印象中display:none的块元素是不占位置的。

一个例子

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

</head>

<body>

    <div style="width:100%;height:200px;border:1px solid red;">第一个层</div>

    <div style="width:100%;height:200px;border:1px solid black;">第二个层</div>

</body>

</html>

浏览结果

为第一个层设置样式visibility:hidden

    <div style="width: 100%; height: 200px; border: 1px solid red; visibility: hidden;">第一个层</div>

    <div style="width:100%;height:200px;border:1px solid black;">第二个层</div>

　　浏览结果

那么为第一个层设置display:none样式

通过上面的对比，你也会发现display:none可以让块元素隐藏并不占位置。而visibility:hidden虽然使块元素隐藏了，但仍占位置。

总结

1、display:none：元素隐藏，不占位置。

2、visibility:hidden：元素隐藏，占位置。

[HTML/CSS]display:none和visibility:hidden的区别的更多相关文章

  1. CSS display:none和visibility:hidden区别

    你知道CSSdisplay:none和visibility:hidden的区别吗,这里和大家分享一下,使用CSS display:none属性后,HTML元素(对象)的宽度.高度等各种属性值都将&qu ...

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

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

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

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

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

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

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

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

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

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

  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:block; visibility: hidden:元素隐藏,占用其本来的页面空间-------- ...

随机推荐

  1. System.Transaction (TransactionScope) 与 可提升 (Promotable) 交易

    这是我的备份,原文请看  http://www.dotblogs.com.tw/mis2000lab/archive/2014/11/12/transactionscope_promotable_tr ...

  2. IS上部署MVC网站，打开后ExtensionlessUrlHandler-

    以管理员运行下面的命令注册: 32位机器: C:\Windows\Microsoft.NET\Framework\v4.0.30319\aspnet_regiis.exe -i 64位机器: C:\W ...

  3. 实战Django：官方实例Part3

    前面两个部分我们介绍了投票应用的框架和后台管理部分.接下来舍得要介绍这个应用面向用户的界面. 这里我们要引入一个新的概念,"视图".在Django中,视图是一根连接模型和模板的纽带 ...

  4. 003-python基础-变量与常量

    一.变量的定义 变量就是用来在程序运行期间存储各种需要临时保存可以不断改变的数据的标示符,一个变量应该有一个名字,并且在内存中占据一定的存储单元,在该存储单元中存放变量的值. 二.变量的声明 #!/u ...

  5. VIM编辑器常用功能整理笔记

    vim编辑器 vi : visual Inertface 可视化接口 vim : vi improved 扩展版 语法着色 模式化编辑器: 编辑模式(命令模式): 默认模式 输入模式: 末行模式: 等 ...

  6. RMAN - "丢失控制文件的恢复"

    OS: Oracle Linux Server release 5.7 DB: Oracle Database 11g Enterprise Edition Release 11.2.0.3.0 - ...

  7. linux清除swap

    执行top会显示Cpu(s):  0.7%us,  0.3%sy,  0.0%ni, 99.0%id,  0.0%wa,  0.0%hi,  0.0%si,  0.0%stMem:   2044500 ...

  8. boa介绍文档

    http://wenku.baidu.com/view/873aa903cc175527072208ce.html?re=view

  9. wpa_supplicant 使用

    (1)通过adb命令行,可以直接打开supplicant,从而运行wpa_cli,可以解决客户没有显示屏而无法操作WIFI的问题,还可以避免UI的问题带到driver.进一步来说,可以用在很多没有键盘 ...

  10. 未能加载文件或程序集“System.Web.Razor”或它的某一个依赖项。文件或目录损坏且无法读取。

    “/”应用程序中的服务器错误. 未能加载文件或程序集“System.Web.Razor”或它的某一个依赖项.文件或目录损坏且无法读取. (异常来自 HRESULT:0x80070570) 说明: 执行 ...