DAY 01 隐藏属性

01、overflow-hidden；

场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……

 <style>
        .box {
            /* 溢出部分显示效果 */
            /* 默认值 溢出部分可见 */
            overflow: visible;
            /* 溢出部分隐藏 */
            overflow: hidden;
            /* 无论是否溢出都显示滚动条 */
            overflow: scroll;
            /* 根据是否溢出,自动显示滚动条 */
            overflow: auto;
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style> 

定位的盒子慎用 ！！！！

---

02、文字溢出显示

1.如果文字显示不开也必须强制一行内

white-space:nowrap;

2.溢出的部分隐藏起来

overflow-hidden;

3.文字溢出的时候用省略号来显示

text-overflow: ellipsis;

4.弹性伸缩盒子模型展示

display: -webkit-box;

5.限制在一个块元素显示的文本的行数

webkit-line-cLamp: 2（行数）;

6.设置或检索伸缩盒对象的子元素的排列方式

webkit-box-orient: vertical;

        .box {
            width: 160px;
            height: 20px;
            font-size: 16px;
            background-color: pink;
            /* 如果文字显示不开 自动换行 */
            /* white-space: normal; */
            /* 1 让换行的文字强制在一行显示 */
            white-space: nowrap;
            /* 2 溢出的部分隐藏 */
            overflow: hidden;
            /* 3 文字溢出显示用省略号 */
            text-overflow: ellipsis;

        }

        .box1 {
            /* 多行文本溢出显示省略号 */
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            width: 170px;
            height: 66px;
            background-color: red;
        }

        /* 
        多行文本溢出必须有固定的高度
        有兼容性问题,ie浏览器不支持
        实际开发建议后端程序员来完成多行文字溢出功能.
        */
    </style>

03、元素本身隐藏

1.visibility: hidden; 

2. display: none;

 <style>
        div {
            width: 200px;
            height: 200px;
        }

        .box1 {
            /* 隐藏元素本身 占位置 */
            /* visibility: hidden; */
            /* 隐藏元素本身 不占位置*/
            display: none;
            background-color: red;
        }

        .box2 {
            background-color: purple;
        }

        .father {
            width: 500px;
            height: 500px;
            background-color: pink;
        }

        /* 1 让son盒子隐藏 */
        .son {
            display: none;
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        /* 2 鼠标经过father盒子后让son显示出来 */
        .father:hover .son {
            display: block;
        }
    </style>