一、display hidden 和none 的区别
来源：知乎
HTML5
的
hidden="hidden"
和CSS的
display:none有什么区别？
于江水
不管什么情况，你知道一个原则就
OK
了：
HTML
是内容展示带有语义，CSS
是界面样式相关。
那么
hidden
这个属性，就表示与浏览者不相关、不重要，浏览器在解析的时候，既然不相关就直接隐藏掉了。如果你有些东西与用户不相关，比如
提交信息的
input
等，就可以用
hidden。
display
none
就是从界面、视觉上的隐藏。如果你需要临时隐藏一些东西后面会再切换出来，比如
下拉菜单
等，就可以用
display
none。因为它不是跟用户不相关，只是目前还不能展示出来。
编辑于
2015-09-26
Boringer
7
人赞同了该回答
效果上没有什么不同，但是只要是写在
CSS
里面的都只是纯展现，可以不遵循任何道理（比如
display，狗都可以伪装成猴的样子），而
HTML
则可能带有语义。
hidden
表示该元素是不相关的、不需要的，这个含义是主要内容，“隐藏”的效果只是附带。也许看上去跟
display:
none
没有任何区别，但是在我们不知道的地方，比如屏幕阅读器或其他一切依赖语义的地方，可能就有它的价值体现。
二、style="display:none;"
这是一个根据下拉列表的选项来决定显示什么隐藏的函数
<script language="javascript">
function pysjzx_change(){
var leaseObj= document.all.id_lease;//把id为"id_lease"的元素名保存在leaseObj
var saleObj= document.all.id_sale;//把id为"id_sale"的元素名保存在saleObj
var hhObj= document.all.id_hh;//把id为"id_hh"的元素名保存在hhObj
var pysjzx_type= document.pysjzxform.pysjzx_type.value;//这是工作把表单控件pysjzx_type的值保存到Pysjzx_type,估计很有可能是一个下拉列表
//以下是根据Pysjzx_type来决定显示哪个要显示，哪个要隐藏
//style.display="block"为显示，display="none"为隐藏
if(pysjzx_type=="sale"){saleObj.style.display="block";leaseObj.style.display="none";}
if(pysjzx_type=="buy"){saleObj.style.display="block";leaseObj.style.display="none";}
if(pysjzx_type=="lease"){leaseObj.style.display="block";saleObj.style.display="none";}
if(pysjzx_type=="hire"){leaseObj.style.display="block";saleObj.style.display="none";}
if(pysjzx_type=="cotenancy"){hhObj.style.display="block";saleObj.style.display="none";}
}
}
三、为什么display:none css代码无用
为什么display:none css代码无用，首先我们需要理解就是display的意思，它代表css的块与行元素的处理，如将块元素，转化成行元素，都是通过这个来实现，如display:block就代表这个元素变成了块级元素，拥有width和height的属性，问题中的display：none没效的原因可能就是因为这个元素并不是一个块级元素，因而设置none对它是没影响的，具体看下代码：
<html>
<head>
<style>
span{
widht:220px;
height:300px;
display:none;//因为span是行级元素，所有width和height都是没有用的，因此display的属性也是不会执行的
}
</style>
</head>
<body>
<span>我是测试文字</span>
</body>
</html>
四、标签设置成style="display:none"后其余的元素跟着隐藏了
因为（div
style="display:none"）这串代码意思是把这个层设置成隐藏的。如果你想让它显示的话可以设置为（style="display:block"）。
display的属性值：
1.
none
此元素不会被显示；
2.
block
此元素将显示为块级元素，此元素前后会带有换行符；
3.
inline
默认。此元素会被显示为内联元素，元素前后没有换行符；
4.
inline-block
行内块元素（CSS2.1
新增的值）；
5.
list-item
此元素会作为列表显示；
6.
run-in
此元素会根据上下文作为块级元素或内联元素显示；
7.
compact
CSS
中有值
compact，不过由于缺乏广泛支持，已经从
CSS2.1
中删除；
8.
marker
CSS
中有值
marker，不过由于缺乏广泛支持，已经从
CSS2.1
中删除；
9.
table
此元素会作为块级表格来显示（类似
<table>），表格前后带有换行符；
10.
inline-table
此元素会作为内联表格来显示（类似
<table>），表格前后没有换行符。
display:none和style="display:none;"的问题分享结束啦，以上的文章解决了您的问题吗？欢迎您下次再来哦！
