隐藏和显示的效果 主要是用到了div的两个属性 那就是display和visible 估计大家在被面试的时候会被问到 它们主要都是用来控制div的显示与隐藏 但是一般都比较喜欢问的问题是它们两者有什么区别
visible是显示 不管有没有看出来 它都是存在的 都会占用空间 而display虽然也是用来控制显示 但它不会像visible那样 站着茅坑不拉屎 它要是没有显示的话 不会占用面积 但是它要是显示的话 则会和visible一样 都会占用面积
详解：
一、
web页面前台编码时经常用到display:none样式，平常使用时发现有几点特征需要注意
1、如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏，载入页面后，在没有通过js设置样式使元素显示的前提下，使用js代码会无法正确获得该元素的一些属性，比如offSetTop,offSetLeft等，返回的值会为0，通过js设置style.display来使元素显示后才能正确获得这些值。
2、使用display:none隐藏的元素不会被百度等搜索网站检索，会影响到网站的SEO，某些情况下可以使用left:-100000px来达到同样效果。
3、如果是通过样式文件或<style>css</style>方式来设置元素的display:none样式，用js设置style.display=""并不能使元素显示，可以使用block或inline等值来代替。通过style="display:none"直接在元素上进行的设置不会有这个问题
4、有些情况下可以使用style.visibility来代替style.display，但是要注意的是style.visibility隐藏元素时会保留元素在页面上所占的空间，而style.display隐藏元素且让出所占页面空间。
二、
display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别:
display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。
例子：
<html>
<head>
<title>display:none和visible:hidden的区别</title>
</head>
<body >
<span style="display:none; padding: 0px; line-height: 1.8; color: rgb(128, 0, 0); ">">隐藏区域</span><span style=" padding: 0px; line-height: 1.8; color: rgb(128, 0, 0); ">">显示区域</span><br />
<span style="visibility:hidden; padding: 0px; line-height: 1.8; color: rgb(128, 0, 0); ">">隐藏区域</span><span style=" padding: 0px; line-height: 1.8; color: rgb(128, 0, 0); ">">显示区域</span>
</body>
</html>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
