元素的隐藏与显示

display

  当display设置为none时，会将元素隐藏,隐藏之后不会占据位置，如下

<div class="fir"></div>
<div class="sec"></div>

div {
    width: 200px;
    height: 200px;
    margin: 0px auto;  /*盒子居中*/
}
.fir {
    background-color: pink;
}
.sec {
    background-color: red;
}

  现在设置粉色的盒子隐藏

.fir {
    margin-top: 100px;
    background-color: pink;
    display: none;
}

刷新之后，红色的盒子上去了，可见display隐藏之后就不占据原来的位置了，使盒子重新显示的方法是设置display: block;。

visiability

  当设置visibility: hidden后，盒子会被隐藏，但是与display不同的是，隐藏的盒子还占据着位置，还是以上面的两个盒子为例，设置粉色盒子隐藏

.fir {
    background-color: pink;
    visibility: hidden;
}

粉色盒子隐藏了，但是还占据着原来的位置。

overflow

  overflow有很多值可以选，如下

值	功能
visible	不剪切内容也不添加滚动条。
auto	超出自动显示滚动条,不超出不显示滚动条
hidden	不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll	不管超出内容否,总是显示滚动条

  为了体会overflow各个值得用法，我们假定有一个p标签的盒子，设定了宽和高，但是文字的内容超出了盒子的大小，看看会发生什么

<p>
    文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</p>

p {
    border: 1px solid red;
    width: 100px;
    height: 100px;
    margin: 100px auto 0px;
}

  可见文字超出了盒子的大小，因为overflow默认为visible,即不剪切也不加滚动条。现在设置overflow: hidden,看看会发生什么

overflow: hidden;

  我们发现超出盒子的文字部分全部都被隐藏掉了，这就是hidden的效果，超出盒子的部分都会被隐藏掉。

  现在将overflow改为scroll

overflow: scroll;

  我们发现它为盒子添加了滚动条，scroll不论内容是否有超出盒子大小，都会添加滚动条的，当设置为auto时，如果内容没有超出盒子大小，就不会设置滚动条，当超出盒子大小时，会设置滚动条。

  现在将overflow设置为auto,并且减少文字数量使得文字数量小于盒子大小

overflow: auto;

没有滚动条，现在设置文字内容大小大于盒子大小

出现了滚动条。