2018-09-15

一，display:none;

隐藏元素，不占网页中的任何空间，让这个元素彻底消失

二，visibility:hidden;

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

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

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

visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。

display: none----将元素的显示设为无，即在网页中不占任何的位置。

例如有三个table，将中间的一个table hidden掉，你会发现在那个被hidden的table看不见了，但是，中间会留有很大的一空白，而这个空白就是这个table没有被隐藏时所占的位置

而none的作用更像是把元素从网页中“去除”（当然不是真的去除，只是效果是如此）

例如有三个table，将中间的一个table none掉，你会发现在剩下的两个table中间不会有任何的空白。就好像中间的那个table从来不存在过一样

例

    .dib-wrap {

    font-size:0;/* 所有浏览器/

    word-spacing:-1px;/ IE6、7 /

    }

    .dib-wrap .dib{

    font-size: 12px;

    letter-spacing: normal;

    word-spacing: normal;

    vertical-align:top;

    }

    @media screen and (-webkit-min-device-pixel-ratio:0){

    / firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 /

.    dib-wrap{

    letter-spacing:-5px;/ Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节

    /

    }

    }

    .dib {

    display: inline-block;

    *display:inline;

    *zoom:1;

    }