写在前面

在群里有朋友问这样一个问题，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. 消息队列之RabbitMQ

    参考教程: http://www.rabbitmq.com/getstarted.html http://www.cnblogs.com/shanyou/p/4067250.html http://w ...

  2. WPF数据双向绑定

    设置双向绑定,首先控件要绑定的对象要先继承一个接口: INotifyPropertyChanged 然后对应被绑定的属性增加代码如下: 意思就是当Age这个属性变化时,要通知监听它变化的人. 即:Pr ...

  3. WPF优化体验<一>

    最近将一个开发和维护了五年的一个Winform项目进行重构,考虑到最近很流行将用户体验挂在嘴上,于是采用了WPF技术,希望能在外观和体验上有一个全新的效果. 以前使用Winform的时候内存控制得不错 ...

  4. Java当中的异常

    异常:中断了正常指令流的事件,是JVM虚拟机产生的对象 异常是程序运行时产生的,和编译无关 class Test{ public static void main(String args[]){ Sy ...

  5. 网络开发库从libuv说到epoll

    引言 这篇博文可能有点水,主要将自己libuv的学习过程和理解. 简单谈方法. 有点杂. 那我们开始吧. 首先介绍 githup . 这个工具特别好用. 代码托管. 如果不FQ可能有点卡. 但是应该试 ...

  6. STM32单片机实现中断后不继续向下执行而是返回到main函数

    做公司的一个项目,实现一个功能就是 机器在进行一项功能时(这项工作时间挺长),想要取消这项工作,重新选择.想了半天没想出来,结果同事提醒了一句,可以在程序中加一个外部中断,在中断中软件复位程序.用到以 ...

  7. DB2批处理数据导入

    这里需要两个BAT文件 first.bat @echo off @set /p databaseName=1)请输入数据库名: @set /p userName=2)请输入用户名: @set /p u ...

  8. 创建自己的oracle解释计划

    1.解释计划 当使用explain plan来为一个查询生成预期的执行计划时,输出将包括一下几种: SQL访问的每一张表: 访问每张表的方法: 每一个需要联结的数据源所使用的联结方法: 按次序列出的所 ...

  9. Node.js中的模块化

    每天一篇文章来记录记录自己的成长吧.大二,该静心了.加油~ 好了,废话不多说,今天说说nodejs中的模块化.(注:此文为自己对书nodejs实战的总结) nodejs一个重要的特性就是模块化,模块就 ...

  10. hdu 5427 A problem of sorting

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5427 A problem of sorting Description There are many ...