display: none and visible: hidden able to hide an element on the page, but the two are different:
display: none --- not being hidden objects retain their physical space, that is, the object is completely disappeared on the page, it is popular not be seen or touched.
visible: hidden --- make objects invisible on the page, but the space occupied by the object on the page has not changed, it is popular invisible but palpable.
example:
<html>
<head>
<title>display:none和visible:hidden的区别</title>
</head>
<body >
<span style="display:none;"> 你好!</span><span style=" background-color:Green">你好!</span><br />
<span style="visibility:hidden;"> 你好!</span><span style="background-color:Green">你好!</span>
</body>
</html>