CSS属性overflow:hidden;visibility:hidden;和display:none区别

我们知道，overflow:hidden;visibility:hidden;和display:none；都是让元素消失的意思，那么这3者之间有什么不同的地方？

1、Overflwo:hidden;

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

Overflow:hidden,隐藏之后元素依然占据着位置。

2、Visibility:hidden

使用后整个元素消失，但是元素占据的位置还在

3、Display:none

使用后整个元素小时，元素占据的位置也没有了

下面上面说的3点，我们来做点小实例区分一下，一目了然

Overflwo:hidden

<h1>默认样式：DIVmoren  设置了宽+高，不设置overflow:hidden的默认效果</h1>
    <div class="moren" style="width:100px;height:100px;border:1px solid red;">
        <span style="color:pink">同时设置了宽和高并且写了overflow:hidden的diva</span>测试文字，测试文字，测试文字，测试文字，测试文字，测试文字，测试文字，测试文字，测试文字
    </div><br /> <br /><br /><br /> <br /><br />
 <h1>示例1：DIVA 设置了宽+高+hidden的块及元素生效；<span style="color:red;">隐藏之后元素依然占据着位置</span></h1>
    <div class="a" style="width:100px;height:100px;border:1px solid red;overflow:hidden;">
        <span style="color:pink">同时设置了宽和高并且写了overflow:hidden的diva</span>测试文字，测试文字，测试文字，测试文字，测试文字，测试文字，测试文字，测试文字，测试文字
    </div>
<h1>示例2：DIVB 只设置overflow，不设置宽+高的块及元素不生效</h1>
       <div class="b" style="border:1px solid red;overflow:hidden;">
        <span style="color:blue;">带overflow:hidden;但没有设置宽高的divb</span>；测试文字，测试文字，测试文字，测试文字，测试文字，测试文字，测试文字
    </div>
 <br /><br /><br />
    <h1>示例3：span元素c  设置宽+高+overflow的行内元素不生效</h1>
    <span class="c" style="width:100px;height:100px;border:1px solid red;overflow:hidden;">
        <em style="color:green;">同时设置了宽和高，但没有写overflow:hidden;的divc</em>测试文字，测试文字，测试文字，测试文字，测试文字，</span>

Display:none

<div class="ceshia" style="float:left;">
<div class="a" style="width:200px;height:100px;border:1px solid red;" >这是块及元素A</div>
<div class="b" style="width:200px;height:100px;border:1px solid blue;">这是块及元素B</div>
<div class="c" style="width:200px;height:100px;border:1px solid red;" >这是块及元素C</div>
<div class="d" style="width:200px;height:100px;border:1px solid blue;">这是块及元素D</div>
</div>
<div class="ceshib" style="float:left;margin-left:10%;;">
 <div class="a" style="width:200px;height:100px;border:1px solid red;display:none; ">这是块及元素A</div>
<div class="b" style="width:200px;height:100px;border:1px solid blue;display:none;">这是块及元素B</div>
<div class="c" style="width:200px;height:100px;border:1px solid red;" >这是块及元素C</div>
<div class="d" style="width:200px;height:100px;border:1px solid blue;">这是块及元素D</div>
块及元素A和B设置display:none;发现C和D占据了A和B的位置
</div>

<h1>说明：使用display:none;之后元素不存在了，元素占据的位置也不存在</h1>

Visibility:hidden

<div class="ceshia" style="float:left;">
<div class="a" style="width:200px;height:100px;border:1px solid red;" >这是块及元素A</div>
<div class="b" style="width:200px;height:100px;border:1px solid blue;">这是块及元素B</div>
<div class="c" style="width:200px;height:100px;border:1px solid red;" >这是块及元素C</div>
<div class="d" style="width:200px;height:100px;border:1px solid blue;">这是块及元素D</div>
</div>
<div class="ceshib" style="float:left;margin-left:10%;;">
 <div class="a" style="width:200px;height:100px;border:1px solid red;Visibility:hidden ">这是块及元素A</div>
<div class="b" style="width:200px;height:100px;border:1px solid blue;Visibility:hidden">这是块及元素B</div>
<div class="c" style="width:200px;height:100px;border:1px solid red;" >这是块及元素C</div>
<div class="d" style="width:200px;height:100px;border:1px solid blue;">这是块及元素D</div>
块及元素A和B设置Visibility:hidden;发现C和D元素位置没变
</div>

<h1>说明：使用Visibility:hidden;之后元素不存在了，但元素占据的位置还在</h1>