列表排列

如下图所示：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
    margin: 0;
    padding: 0;
}
body{background-color: pink;}
.box{
    width: 1000px;
    margin: 20px auto 0;
    overflow: hidden;
    padding: 2px 0 0 2px;
}
.box li{
    float: left;
    width: 200px;
    height: 300px;
    background-color: #c6ff8a;
    list-style-type: none;
    border: 2px solid #818ccb;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 10px 12px 0 12px;
    margin: -2px 0 0 -2px;
}
.box li:hover{
    border-color: red;
    z-index: 2;
}
</style>
</head>
<body>
    <ul class="box">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

应用margin负值配个外框的padding达到效果。

高否？富否？帅否？否？滚去学习！