图片放大效果之相对定位

1、图片右边和下边均有6px的空隙
2、在图片和li之间，都有边框和不同的填充色
（一个元素只能有一个边框和背景色，所以可以分别给li和img添加边框和背景色）
3、滑过图片的时候，图片有放大效果
（如果只写滑过效果，部分图片会被掩盖在其他图片的下面，所以需要使用相对定位将图片的层次上提一层）
（相对定位的偏移量可以为负值）

        /*  全局变量 */
        *{margin: 0;padding: 0;}
        li{list-style: none;}
        a{text-decoration: none;}
        img{vertical-align: middle;}

        .list{
            width: 620px;
            height: 396px;
            margin:50px auto;
        }
        .list li{
            width: 116px;
            height: 91px;
            float: left;
            background: #edefee;
            border:1px solid #cdcdcd;
            margin-right: 6px;
            margin-bottom: 6px;           
        }
        .list li img{
            width: 100px;
            height: 75px;
            border: 1px solid #aaaaaa;
            padding: 2px;
            background-color: #fefff3;
            margin:5px;           
        }
        /* 滑过li的时候，图片变化 */
        .list li:hover img{
            border: solid 1px #000;
            width: 200px;
            height: 150px;
            /* 相对定位 */
            position: relative;
            /* 定位偏移量 */
            top: -38px;
            left: -50px;
            /* 也可以使用 
            bottom: 38px;
            right: 50px;*/
        }
    </style>

<ul class="list">
        <li>
            <img src="./../img/photo01.jpg" alt="">
        </li>
        <li>
            <img src="./../img/photo02.jpg" alt="">
        </li>
        <li>
            <img src="./../img/photo03.jpg" alt="">
        </li>
        <li>
            <img src="./../img/photo04.jpg" alt="">
        </li>
        <li>
            <img src="./../img/photo05.jpg" alt="">
        </li>
        <li>
            <img src="./../img/photo06.jpg" alt="">
        </li>
        <li>
            <img src="./../img/photo07.jpg" alt="">
        </li>
        <li>
            <img src="./../img/photo08.jpg" alt="">
        </li>
        <li>
            <img src="./../img/photo09.jpg" alt="">
        </li>
        <li>
            <img src="./../img/photo10.jpg" alt="">
        </li>
        <li>
            <img src="./../img/photo11.jpg" alt="">
        </li>
        <li>
            <img src="./../img/photo12.jpg" alt="">
        </li>
        <li>
            <img src="./../img/photo13.jpg" alt="">
        </li>
        <li>
            <img src="./../img/photo14.jpg" alt="">
        </li>
        <li>
            <img src="./../img/photo15.jpg" alt="">
        </li>
        <li>
            <img src="./../img/photo16.jpg" alt="">
        </li>
        <li>
            <img src="./../img/photo17.jpg" alt="">
        </li>
        <li>
            <img src="./../img/photo18.jpg" alt="">
        </li>
        <li>
            <img src="./../img/photo19.jpg" alt="">
        </li>
        <li>
            <img src="./../img/photo20.jpg" alt="">
        </li>
    </ul>