同样是隐藏，display:none与visibility:hidden有什么区别呢?

虽然display:none与visibility:hidden都能达到隐藏可见元素的作用（视觉上），但事实上，visibility:hidden却占据了空间，width、height等属性依然被加载出来，它就像个透明人,会依然占据空间。

因此，在html+css布局的时候，根据需要，如果元素需要被隐藏但又要保留位置，那么就用visibility:hidden，如果要让元素彻底隐藏且不占据空间位置，那么display:none吧。

CSS样式display:none和visibility:hidden的区别的更多相关文章

  1. CSS样式“display:none”与“visibility:hidden”区别

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

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

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

  3. css中display:none与visibility: hidden的区别

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

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

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

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

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

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

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

  7. display:none与visibility: hidden的区别

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

  8. display:none和visibility:hidden的区别[]

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

  9. [HTML/CSS]display:none和visibility:hidden的区别

    写在前面 在群里有朋友问这样一个问题,display:none的标签,影响了布局.这就引出了本篇这样的问题,印象中display:none的块元素是不占位置的. 一个例子 <!DOCTYPE h ...

随机推荐

  1. [Effective C++ --033]避免遮掩继承而来的名称

    这一章一直在想怎么写,因为比较基础,很容易理解,就按照需要来写吧. 假设我们有这样一个类: class Base { private: int x; public: ; virtual void mf ...

  2. Ruby on Rails Tutorial 第一章 之 搭建开发环境

    云端开发环境,Cloud9(https://ide.c9.io/).这个开发环境预先安装好了Rails开发所需要的大多数软件,包括Ruby.RubyGems和Git,需要自己安装Rails. 1.安装 ...

  3. C++的64位整数

    在做ACM题时,经常都会遇到一些比较大的整数.而常用的内置整数类型常常显得太小了:其中long 和 int 范围是[-2^31,2^31),即-2147483648~2147483647.而unsig ...

  4. 小白日记27：kali渗透测试之Web渗透-Http协议基础，WEB

    Http协议基础 Web技术发展[http://www.cnblogs.com/ProgrammerGE/articles/1824657.html] 静态WEB[网页] 动态WEB 属于一种应用程序 ...

  5. 【线性结构上的动态规划】UVa 11584 - Partitioning by Palindromes

    回文串问题.给出一个字符串,问最少可以划分为多少个字符串子串. 对于判断是否为回文串,对于不是很长的字符串,可以采取直接暴力,即从两边向中间收缩判断字符相等. bool is_pali(int l, ...

  6. PE制作实录 —— 定义我的 PE 工具箱

    Step 1 想个好听的名字 我倒是没什么文化,洋气点又要方便记忆,最终锁定 Operit! ,源自英语 Operate .it ,合并一下再加上感叹号,洋气吧~ Step 2 利用百草霜制作 Mes ...

  7. ps，Photoshop

    ps翻转.旋转等操作. 注:截图技巧--鼠标按着不懂,同时点击截图快捷键(QQ为ctrl+alt+a)即可避免按下快捷键鼠标按下等操作消失截不到的尴尬.

  8. HTTP - 条件请求

    当 HTTP 请求包含 If-XXX 这种样式的首部时,服务器会对附带的条件进行判断,只有判断指定条件为真,才会执行请求.这样的请求首部有五个,分别是 If-Modified-Since.If-Unm ...

  9. PYTHON：HTTP头设置工具（以附件名为例）

    import oss2 # 用户授权 auth = oss2.Auth('accessId', 'accessKey')# oss bucket bucket = oss2.Bucket(auth, ...

  10. 浏览器userAgent大全

    iPhone ●iOSMozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Versi ...