CSS笔记 - fgm练习 2-10 - 提示框效果 （清除子元素浮动高度塌陷的影响）

 

CSS清除浮动方法参考：

https://blog.csdn.net/promiseCao/article/details/52771856

 

    <style>
    *{
        margin: 0; padding: 0; list-style: none; font-size: 12px;
    }
    .outer{
        width: 560px;
        margin: 10px auto;
        border: 1px solid #000;
        padding: 10px 0 0 10px;
    }
    .outer>h2{
        text-align: center;
        font-size: 18px;
        margin-bottom: 10px;
    }

    .outer>ul{
        /* overflow: hidden; */
        /* 这里不能用overflow: hidden; 否则li里面img超出ul范围边角会被裁剪。
           疑问： 这里的li是浮动流， 怎么也可以撑起外层盒子的高度？？ 
           其实还是会导致塌陷。

           由后面 :after 伪元素的设置解决了这个问题。 */
        zoom: 1;
        /* zoom: 1;  什么作用？？ */
    }
    .outer>ul:after{
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
        /* :after伪类+content 清除浮动的影响 。
            这些设置撑起了ul的高度。 （li是浮动流，所以撑不起外层盒子。） */
    }


    .outer>ul>li{
        width: 80px;
        height: 80px;
        padding: 10px;
        float: left;
        background: #f0f0f0;
        border: 1px solid #000;
        margin: 0 10px 10px 0;
        cursor: crosshair;
        position: relative;
    }

    /* 子绝父相，img参照li 定位，hover的时候才显示。
       由操作引发，后面显示的内容覆盖了原本的，要联想到定位这个方法！ */

    /* 疑问：
       img是属于li标签内的。所以图片的显示只能从li元素的左上角边界开始。
       怎么实现左上角能超出边框显示？？？
　　　　ul不要设置overflow: hidden ， 就不会导致img边角被裁减。 */

    .outer>ul>li>img{
        position: absolute;
        left: -14px;
        top: -14px;
        display: none;
        border: 2px solid #000;

        z-index: 1;
        /* z-index要设置，否则img的边框被li给覆盖了。 */
    }

    .outer>ul>li:hover img{
        display: block;
    }

    /* .outer>ul>li:hover{
        background: url("imgs/1.jpg") -20px -20px no-repeat;
    } */
    </style>