overflow：hidden与display：none的区别

1、Display:none

隐藏 但是在原来的标准流不占位置，使用此属性之后元素不存在了，元素占据的位置也不存在。

2、Overflow:hidden

对行内元素无效，必须是块级元素，并且设置宽度高度。

Overflow:hidden,相当于剪切,把多余出来的部分剪切掉。

display:none和visible:hidden 

相同点：

都能把网页上某个元素隐藏起来。

二、diaplay：none与visibility：hidden的区别

（1）空间占据性

display：none渲染时不再占据任何空间，会让元素完全从渲染树中消失 （DOM树）。

visibility:hidden使对象在网页上不可见，但该对象在网页上所占的空间没有改变

（2）回流与渲染性

display：none会产生回流与重绘

visibility：hidden则不会

（3）株连性

display：none有株连性，一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见

visibility：hidden不具备株连性，应用了visibility:hidden声明下的子孙元素如要显示可加上visibility:visible

（4）浏览器解析

display：none浏览器不会解析该元素，

overflow：hidden浏览器会解析该元素