display:none,overflow:hidden,visibility:hidden之间的区别

一，display:none;

隐藏元素，不占网页中的任何空间，让这个元素彻底消失（看不见也摸不着）

二，overflow:hidden;

让超出的元素隐藏，就是在设置该属性的时候他会根据你设置的宽高把多余的那部分剪掉

我们都知道每个浏览器对代码的解析都不同，所以我们在做页面的时候会遇到很多bug，在IE里面如果内容的高度超过了该层的高度他会自动地撑开，但火狐等里面的高度是多高这层就只有这么大，内容的高即使超出了也不会影响你设置的高，在这个时候我们有的问题就可以用overflow：hidden；来解决，这是第一点，还有就是我们可以利用它做出很多hove效果

三，visibility:hidden;

他是把那个层隐藏了，也就是你看不到它的内容但是它内容所占据的空间还是存在的。（看不见但摸得到）

{ display: none; /* 不占据空间，无法点击 */ }
/********************************************************************************/

{ visibility: hidden; /* 占据空间，无法点击 */ }
/********************************************************************************/

{ height: 0; overflow: hidden; /* 不占据空间，无法点击 */ }
/********************************************************************************/
{ position: absolute; top: -999em; /* 不占据空间，无法点击 */ }
/********************************************************************************/
{ position: relative; top: -999em; /* 占据空间，无法点击 */ }
/********************************************************************************/
{ position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ }
/********************************************************************************/
{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ }
/********************************************************************************/
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间，可以点击 */ }
/********************************************************************************/

分类: 前端基础知识

好文要顶关注我收藏该文微信分享