今天做到一道題，當(dāng)時沒寫出來，這道題是類似九宮格的布局，而且加了高亮效果。開頭用table做，但是發(fā)現(xiàn)table的元素并不能用z-index,
<html>
<head>
<style type="text/css">
.grid{background: #fff;width:170px;display: table;}
.grid div{width:50px; height: 50px; border: 5px solid #00f; display: inline-block;text-align: center;background-color: #eee;margin:-5px 0 0 -5px;line-height: 50px;z-index: 1;position: relative; left:5px; top:5px;}
.grid div:hover{border-color:#f00;z-index: 10;}
</style>
</head>
<body>
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
嘗試過用table,主要的技巧是border-collapse，但是，hover的時候position:relative沒有用，absolute會偏移，不知道是什么問題，css還是太弱了啊
更新
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.box {
width: 50px;
height: 50px;
border: 2px solid blue;
display: flex;
align-items: center;
justify-content: center;
}
.box:nth-of-type(n+2){
margin-left: -2px;
}
.row:nth-of-type(n+2){
margin-top: -2px;
}
.box:hover {
border-color: red;
z-index: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div class="row">
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="row">
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
</div>
</div>
</body>
</html>
