九宫格

方法1-浮动

<style>
    *{
        padding: 0;
        margin: 0;
    }
    ul{
        width: 298px;/*不用300px*/
        height: 298px;
        margin:100px auto;

    }
    ul>li{
        border: 1px solid #000;
        list-style-type: none;
        float: left;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        /*z-index: 1;*/
        box-sizing: border-box;
    }
    ul>li.f1{
        margin-left:-1px;
    }
    ul>li.f2{
        margin-top:-1px;
    }
    ul>li:hover{
        border: 1px solid red;
        /*z-index: 111;*/
        /*z-index是无效的，只有使用position这个属性才可以实现效果！！！！*/
        position: relative;
    }
</style>
<ul>
    <li class="item1">1</li>
    <li class="item2 f1">2</li>
    <li class="item3 f1">3</li>
    <li class="item4 f2">4</li>
    <li class="item5 f1 f2">5</li>
    <li class="item6 f1 f2">6</li>
    <li class="item7 f2">7</li>
    <li class="item8 f1 f2">8</li>
    <li class="item9 f1 f2">9</li>
</ul>

注：用了f1和f2的类，其实不需要，直接给所有的li{
margin-left:-1px;margin-top:-1px;
} 即可！

方法2-flex布局

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .flex {
        display: flex;
        width: 300px;
        /*height: 300px;*/
        margin: 50px;
        flex-wrap: wrap;/*没有这个 属性，那么li不换行，且w无效了！！！*/
        /*align-content: flex-start; */
        box-sizing: border-box;
    }

    .flex > li {
        box-sizing: border-box;
        height: 100px;
        width: 100px;
        margin-left: -4px;
        margin-top: -4px;
        line-height: 100px;
        text-align: center;
        list-style: none;
        border: 4px solid #ccc;
    }

    .flex > li:hover {
        border-color: red;
        position: relative; /*没有这个定位，那么边框是被遮盖的！！1*/
        /*z-index:2;*/
    }
</style>
<ul class="flex">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>flex</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>