CSS笔记 显示和隐藏

一. display显示 隐藏

如果是display：none，则是隐藏，而且 不保留位置
如果是display：block，就是显示（除了变成块元素，也可以显示元素）

二. visibility

如果是visibility：visible，就是显示
如果是visibility：hidden，就是隐藏，而且保留位置

三. overflow

他总共有四个属性值

1. visible
   是默认值
   溢出显示

* {
    padding: 0px;
    margin: 0px;
}

.father {
    overflow: visible;

    width: 200px;
    height: 200px;

    margin: 100px auto;
    border: 1px solid blue;
}

2. hidden
隐藏文字

3. scroll
   自动添加滚动条
   
4. auto
   在需要时添加滚动条
   
   

四.实例

鼠标经过变色

* {
    padding: 0px;
    margin: 0px;
}

.father {
    position: relative;

    width: 200px;
    height: 200px;

    margin: 100px auto;
    background-color: blue;
}

.father .mask {
    position: absolute;

    /* 关键 */
    display: none;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, .5);
}

.father:hover .mask {
    display: block;
}

---

注意这句，经过父亲的时候，调用这个.mask

.father:hover .mask {
    display: block;
}