html
<!-- 综合实力:flex布局、box-sizing、css选择器、z-index、页边距 --> <ul class="grid"> <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>
css
<style> body{ padding: 50px; } .grid{ display: flex; flex-wrap: wrap; width: 300px; } .grid li{ width: 100px; height: 100px; line-height: 100px; text-align: center; border: 4px solid #ccc; box-sizing: border-box; margin-left: -4px; margin-top: -4px; } /* 1、4、7 */ .grid li:nth-child(3n+1) { margin-left: 0; } .grid li:hover{ border-color: red; z-index: 2; } </style>