你知道CSSdisplay:none和visibility:hidden的区别吗,这里和大家分享一下,使用CSS display:none属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在。

CSS display:none和visibility:hidden的区别

visibility:hidden隐藏,但在浏览时保留位置;CSS display:none视为不存在,且不加载!

Overflow属性值{visible|hidden|scroll|auto}前提是先要限制DIV的宽度(width)和高度(height)。二者都是隐藏HTML元素,在视觉效果上没有区别,但在一些DOM操作中二者还是有所不同的。

CSS display:none;

使用该属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;

visibility:hidden;

使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。

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

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

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

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

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

  3. display:none和visibility:hidden区别

    <!-- display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: --> <!-- display:none 不为被隐藏的对象保留其物理空 ...

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

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

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

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

  6. 个人收集(转载)CSS中 display:none和visibility:hidden的区别

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

  7. CSS魔法堂:display:none与visibility:hidden的恩怨情仇

    前言  还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而visibilit ...

  8. display:none和visibility:hidden的区别?

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

  9. display:none和visibility:hidden两者的区别

    display与元素的隐藏 如果给一个元素设置了display: none,那么该元素以及它的所有后代元素都会隐藏,它是前端开发人员使用频率最高的一种隐藏方式.隐藏后的元素无法点击,无法使用屏幕阅读器 ...

随机推荐

  1. 点石成金:访客至上的网页设计秘笈(原书第2版) 中文PDF版

    可用性设计是Web设计中最重要也是难度最大的一项任务.本书作者根据多年从业的经验,剖析用户的心理,在用户使用的模式.为扫描进行设计.导航设计.主页布局.可用性测试等方面提出了许多独特的观点,并给出了大 ...

  2. Algorithms - Insertion sort

    印象 图1 插入排序过程 思想 插入排序(Insertion Sort)的主要思想是不断地将待排序的元素插入到有序序列中,是有序序列不断地扩大,直至所有元素都被插入到有序序列中. 分析 时间复杂度: ...

  3. requireJS入门基础

    参考  require.js详解 1.引用requireJS的html文件 <!DOCTYPE html> <head> <title>requireJS</ ...

  4. Openwrt单独编译某一个模块而不是整个固件

    make package/rt2860v2/compile 就是在make menuconfig那个目录下执行此命令就会编译rt2860v2这个模块

  5. C++ 打印缓存区数据 十六进制格式

    1.调试C++程序时,有时可能需要以16进制打印输出缓存区数据,以定位跟踪问题,现提供其实现的代码: void printHex(char* buff, int buff_len) { + ); if ...

  6. UC浏览器体验

    1.用户界面: 有两个页面,一个展示网页应用-可添加自己喜欢的网页应用,另一个用来搜索,有推荐的常用的网址,有UC头条,页面下有设置,整体布局常规 2.短期刺激: 没有特别花哨的地方:个人感觉比较实用 ...

  7. 关于javascript数据存储机制的一个案例。

    之前在学习js的结合性的时候,我有点不太明白,在网上找到一个比较经典的C语言优先级结合性的案例,就是下边这一个.本想在js之中测试一番,结果竟然发现得出的结果和网上的不一样,这令我百思不得其解,后经高 ...

  8. OpenCV&Qt学习之四——OpenCV 实现人脸检测与相关知识整理

    开发配置 OpenCV的例程中已经带有了人脸检测的例程,位置在:OpenCV\samples\facedetect.cpp文件,OpenCV的安装与这个例子的测试可以参考我之前的博文Linux 下编译 ...

  9. kuangbin专题七 POJ3264 Balanced Lineup (线段树最大最小)

    For the daily milking, Farmer John's N cows (1 ≤ N ≤ 50,000) always line up in the same order. One d ...

  10. Python之将字符串转换为字节的两种方法

    s = '你是谁' a = bytes(s,'utf-8') # ==> 得出的 a 的结果就是对应的字节 s.encode('utf-8') # ==> 该命令将字符串转换为字节形式