两种隐藏元素方式【display: none】和【visibility: hidden】的区别
此随笔的灵感来源于上周的一个面试,在谈到隐藏元素的时候,面试官突然问我【display: none】和【visibility: hidden】的区别,我当时一愣,这俩有区别吗,好像有,但是忘记了啊,因为平常基本都是用【display: none】,几乎没用过【visibility: hidden】,我只好如实回答。面试结束后回到家的第一件事就是敲代码测试,下面就是测试过程及结果:
一、首先在页面中放2个div,并用不同的背景色区分他们:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两种隐藏元素方式的区别</title>
<style type="text/css">
div{ width: 100px; height: 100px; color: white; text-align: center; line-height: 100px; font-size: 40px;}
</style>
</head>
<body>
<div style="background: blue;>div1</div>
<div style="background: red;">div2</div>
</body>
</html>
二、给div1设置【display: none】:
<div style="background: blue; display: none">div1</div>
三、给div1的【display: none】换成【visibility: hidden】:
<div style="background: blue; visibility: hidden">div1</div>
四、总结:
【display: none】:隐藏元素及元素内的所有内容,并且该元素的位置、宽高等其他属性值一并“消失”;
【visibility: hidden】:隐藏元素及元素内的所有内容,但是该元素的位置、宽高等属性值仍然还在。
两种隐藏元素方式【display: none】和【visibility: hidden】的区别的更多相关文章
- 两种隐藏元素方式【display: none】和【visibility: hidden】的区别及由此引出的问题
此前看到一随笔(@任天缘 原文)讲了这个问题,并总结了: [display: none]:隐藏元素及元素内的所有内容,并且该元素的位置.宽高等其他属性值一并“消失”: [visibility: hid ...
- 个人收集(转载)CSS中 display:none和visibility:hidden的区别
visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏 ...
- display:none;与visibility:hidden;的区别
visibility:隐藏对应的元素但不挤占该元素原来的空间.display:隐藏对应的元素并且挤占该元素原来的空间. 下面来看visibility和dispaly的一些参数 visibility用来 ...
- display:none和visibility:hidden的区别?
css控制元素不可见的方法 { display: none; /* 不占据空间,无法点击 */ } /************************************************* ...
- 前端面试题-display:none和visibility:hidden的区别
一.display:none和visibility:hidden的区别 1.1 空间占据 1.2 回流和渲染 1.3 株连性 二.空间占据 display:none 隐藏后的元素不占据任何空间,而 v ...
- 关于隐藏元素高度的问题 css visibility:hidden 与 display:none的区别
其实这是一个老问题了,s visibility:hidden 与 display:none 共同点就是都会似的元素不可见.但是 visibility:hidden 的DOM元素是占用空间的,会挤占其他 ...
- display:none与visibility: hidden的区别
display:none和visibility: hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失. ...
- [HTML/CSS]display:none和visibility:hidden的区别
写在前面 在群里有朋友问这样一个问题,display:none的标签,影响了布局.这就引出了本篇这样的问题,印象中display:none的块元素是不占位置的. 一个例子 <!DOCTYPE h ...
- CSS样式display:none和visibility:hidden的区别
同样是隐藏,display:none与visibility:hidden有什么区别呢? 虽然display:none与visibility:hidden都能达到隐藏可见元素的作用(视觉上),但事实上, ...
随机推荐
- 使用Spring AOP预处理Controller的参数
实际编程中,可能会有这样一种情况,前台传过来的参数,我们需要一定的处理才能使用,比如有这样一个Controller @Controller public class MatchOddsControll ...
- sed 变量替换 把m.txt文件中的$i替换成$j
zabbix:/root/zabbix# cat a1.sh for j in {1..48} do sed "s/\$i/$j/g" m.txt >>tmp.txt ...
- Devexpress之dxErrorProvider
DXErrorProvider:错误提示控件,用法类似于VS的winform控件中的ErrorProvider. 下面为一个使用实例,验证文本框输入是否为数字: ①.添加System.Text.Reg ...
- 仿建行JS键盘
一款比较好用的JS密码输入脚本,效果图如下: 代码如下: <html> <head> <script> /*js文件*/ window.onload=functio ...
- BASH小脚本
1.查找当前目录中所有大于500M的文件,把这些文件名写到一个文本文件中,并统计其个数. find ./ -size +500M -type f | tee file_list | wc -l 2.在 ...
- devi into python 笔记(六)正则表达式 原始字符串
字符串函数replace: #string.replace: #字符串的replace方法:替换子串,不改变原来的字符串 s = "broad road" #打印出来会发现不单单是 ...
- selenium webdriver(1)---浏览器操作
启动浏览器 如何启动浏览器已在上篇文章中说明,这里还是以chrome为例,firefox.IE启动方式相同. //启动浏览器 import org.openqa.selenium.WebDriver; ...
- SLua 中使用 Lua 5.3 的编译工程
2016-03-05 更新: 之前编译的库,在 Android 下 Lua_Number 和 Lua_Integer 被编译为了32位,导致从 C# 到 Lua 过程中有64位到32位整型转换会出现溢 ...
- nyoj 37回文串
述所谓回文字符串,就是一个字符串,从左到右读和从右到左读是完全一样的,比如"aba".当然,我们给你的问题不会再简单到判断一个字符串是不是回文字符串.现在要求你,给你一个字符串,可 ...
- HW4.18
public class Solution { public static void main(String[] args) { System.out.println("Graph 1&qu ...