写在前面

在群里有朋友问这样一个问题，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. DIV JS CSS 轻量级弹出层 兼容各浏览器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 清理sql2000查询分析器登录名记录

    注册表 HKEY_CURRENT_USER/Software/Microsoft/Microsoft  SQL  Server/80/Tools/Client/PrefServers

  3. Treeview获取父节点

    private void treeView1_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object&g ...

  4. 【转载】MongoDB参数

    我们可以通过mongod --help查看mongod的所有参数说明,以下是各参数的中文解释. 基本配置–quiet# 安静输出 –port arg# 指定服务端口号,默认端口27017 –bind_ ...

  5. Android开发初始

    由于本人一直的主攻方向是.NET平台,所以移动开发方面主要是Windows Phone平台,但是确实Windows Phone的市场占有率太小了,在加上本人是个技术迷,希望尝试新的东西,所以Andro ...

  6. IBM MQ扩大队列最大消息长度

    要设置MQ的最大消息长度,需要考虑同时设置队列管理,队列以及通道的最大消息长度. 具体操作如下: runmqsc 队列管理器名称 alter qmgr maxmsgl(10000000) 1 : al ...

  7. 基于HTML5的可预览多图片Ajax上传

    一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...

  8. ios9网络请求https适配

    发现问题:今天升级Xcode 7.0 bata发现网络访问失败.输出错误信息: The resource could not be loaded because the App Transport S ...

  9. sharepoint 2010 找不到搜索不到ad里的用户

    前提条件: 1.这个用户是在ad中存在的. 2.这个用户也同步到了userprofile中. 问题现象: 在sharepoint的人员选择器中,搜索不到已经添加的用户. 可能原因: 1.有人说需要将 ...

  10. Jquery 1.8.2 click function - 动态

    Jquery 动态按钮方法如下:   $("#parentID").on("click",'.classname',function(){$(this).par ...