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

时间:2022-09-06 10:27:48

同样是隐藏,display:nonevisibility: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&colon;none和visibility&colon;hidden的区别

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

  3. css中display&colon;none与visibility&colon; hidden的区别

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

  4. display&colon;none&semi;与visibility&colon;hidden&semi;的区别

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

  5. display&colon;none和visibility&colon;hidden的区别?

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

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

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

  7. display&colon;none与visibility&colon; hidden的区别

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

  8. display&colon;none和visibility&colon;hidden的区别&lbrack;&rsqb;

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

  9. &lbrack;HTML&sol;CSS&rsqb;display&colon;none和visibility&colon;hidden的区别

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

随机推荐

  1. js修改不了input的值

    奇怪的input 今天想做一个通过点击按钮,修改input值的控件,但是点击按钮后,input值变成修改的值后又变回了原来的值,百思不得其解,代码如下 <form> <div cla ...

  2. Burp Suite 常用功能 0x01 扫描后台

    扫描后台: 代理→转到intruder 在链接后面添加变量,变量=后台地址t GET /§后台§ xt 注意: 配置完成点击菜单栏Intruder → start attack 开始扫描.

  3. mac-文本编辑器

    windows时代最喜欢的文本编辑器一直是ultraedit,但到了mac下,破解的ultraedit退出时会异常,于是琢磨着换编辑器,最终选择了sublime text2,百度下载,不注册也可以用. ...

  4. Android Studio日志工具的使用

    Android Studio的LogCat工具 Verbose:对应Log.v(),这个方法用于打印那些最为琐碎的信息,意义最小的日志信息.是Android日志里面级别最低的一种. Debug:对应L ...

  5. ViewPager,实现真正的无限循环(定时&plus;手动)

    利用定时器,实现循环轮播,很简单:只需在定时器的消息里加如下代码即可: int count = adapter.getCount(); if (count > 1) { // 多于1个,才循环 ...

  6. JasperReports教程:Report Data Sources

    原文地址:http://www.tutorialspoint.com/jasper_reports/jasper_report_data_sources.htm Datasources是一个结构化的数 ...

  7. 图解WPF程序打包全过程

    首先打开已经完成的工程,如图: 下面开始制作安装程序包. 第一步:[文件]——[新建]——[项目]——安装项目. 名称——可以自己根据要求修改. 位置——是指你要制作的安装文件存放在什么目录内,可以根 ...

  8. Ubuntu中全然卸载Nginx

    Nginx尽管好用,可是一旦关键配置文件被改动,想要卸载重装却是相当困难.本人由于採用apt-get方式安装后又源代码安装了Nginx,结果出现冲突,卸载不了,安装不上,非常是蛋疼.基本的问题还是Ng ...

  9. UNIX域协议之描述符传递

    一.mycat程序 #include <fcntl.h> #include <stdlib.h> #include <unistd.h> #define BUFFS ...

  10. NOIP-扫雷游戏

    题目描述 扫雷游戏是一款十分经典的单机小游戏.在n行m列的雷区中有一些格子含有地雷(称之为地雷格),其他格子不含地雷(称之为非地雷格).玩家翻开一个非地雷格时,该格将会出现一个数字——提示周围格子中有 ...