效果

效果图.png

技术点

样式重置
弹性布局
盒模型
margin负值
css3选择器
z-index

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九宫格</title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    body{
        padding: 200px;
    }
    ul{
        list-style: none;
        display: flex;
        flex-wrap: wrap; 
        width: 300px;
    }
    li{
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        border: 2px solid #ccc;
        box-sizing: border-box;
        margin-left: -2px;
        margin-top: -2px;
    }
    li:nth-child(3n+1){
        margin-left: 0;
    }
    li:nth-child(-n+3){
        margin-top: 0;
    }

    li:hover{
        border: 2px solid red;
        z-index: 2;
    }

</style>
<body>
    <ul id="wrap">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>

</body>
</html>