写在前面

在群里有朋友问这样一个问题，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. [.ashx檔？泛型处理例程？]基础入门#3....ADO.NET 与 将DB里面的二进制图片还原

    原文出處  http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_03_db_picture_show.aspx ...

  2. ok6410的LCD裸机范例

    /****************************************** 实验步骤 1.配置引脚功能,将其GPI.GPJ引脚设置为VD数据输出模式,及GPJ后几位设置成LCD时钟输出: ...

  3. MVC中用ajax提交json对象数组

    应用场景:在前端用ajax向服务器提交json对象数组,在controller的以对象数组作为函数的参数,提交的json数组直接转为服务器端的对象数组. 如: 要将json对象数组[{Id:1,Nam ...

  4. char const*, char*const, const char *const的区别

    C++标准规定,const关键字放在类型或变量名之前等价的.所以,const char*和 char const*是一样的. const char*   //常量指针---指向常量的指针----指针指 ...

  5. Python input()

    在Python语言中,我们经常需要与用户实现交互,下面是一个小实例 # -*- coding:UTF-8 -*- #获取输入参数,并将输入的值存储到txt文件中 String1 = input(&qu ...

  6. 观察者模式学习--使用jdk的工具类简单实现

    观察者模式学习之二:使用jdk的自带的工具类实现,与自己实现相比,两者有以下的区别: 1,自己实现,需要定义观察者的接口类和目标对象的接口类.使用java util的工具类,则不需要自己定义观察者和目 ...

  7. Oracle数据迁移至MySQL

    ORACLE DB: 11.2.0.3.0 MYSQL DB: 5.5.14 因项目需求,需要将ORACLE生产中数据迁移至MYSQL数据库中作为初始数据,方法有如下几种: 1.ORACLE OGG ...

  8. Oracle 11g Windows 迁移至 Linux

    OS: windows server 2008 R2 enterprise DB: 11.2.0.1.0 数据库配置: ORACLE_BASE=D:\app\Administrator ORACLE_ ...

  9. android开发系列之gradle认识

    后面的系列博客,我将会写一写自己这段时间对于android的学习.认识.体会,希望能够与大家分享. 相信大家从ADT开发切换到android studio最大.最直观的变化就是gradle,因为在an ...

  10. UML 中的用例图解析以及starUML详细介绍

    UML中的用例(Use Case)概念分析及StarUML实例 在UML 中use case 似 乎最簡單的,用例建模的最主要功能就是用来表达系统的功能性需求或行为,依我的理解用例建模可分为用例图和用 ...