flex布局实现九宫格，浮悬被选中框变红。
下面介绍下写的过程中软实力的体现
<html>
<head>
<meta charset="utf-8">
<title>九宫格</title>
/*消除各个浏览器之间的差异,初始化标签样式*/
<link rel="stylesheet" href="./reset.css">
</head>
<body>
/*语义化的写标签*/
<ul class="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>
<style type="text/css">
.wrap{
display: flex;
flex-wrap: wrap;
width: 300px;
}
.wrap li{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
/*盒子width以border+padding+content计算*/
box-sizing: border-box;
border:1px solid #000;
/*解决边距重叠问题*/
margin-left: -1px;
margin-top: -1px;
}
/*css高级选择器实现边距上移和左移问题*/
.wrap li:nth-child(3n+1){
margin-left: 0;
}
.wrap li:nth-child(-n+3){
margin-top: 0;
}
.wrap li:hover{
/*悬浮被掩盖问题*/
z-index: 10;
border:1px solid red;
}
</style>
</body>
</html>