题目：实现如下“九宫格”，当鼠标移入的时候，当个格子的边框变红。

微信图片_20181203162504.png

方案1：inline-block解决方案

html

<ul class="box">
    <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

*{
    padding: 0;
    margin: 0;
}
li{
    list-style: none;
}
body{
    padding: 50px;
}
.box{
    width: 300px;
    font-size: 0px;
}
.box > li{
    display: inline-block;
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    border: 4px solid #ccc;
    font-size: 12px;
    line-height: 100px;
    text-align: center;
    margin-top: -4px;
    margin-left: -4px;
    position: relative;
}
.box > li:nth-child(3n+1){
    margin-left: 0;
}
.box > li:nth-child(-n+3){
    margin-top: 0;
}
.box > li:hover::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 4px solid red;
    left: -4px;
    top: -4px;
    z-index: 2;
}

知识点

1. display: inline-block
   通过display: inline-block，让li元素排列在一行中。当一行排不下时，自动换行。
2. box-sizing
   通过box-sizing: border-box，设置盒模型为IE模型。默认是标准模型(content-box)
3. css选择器
   通过.box > li:nth-child(3n+1)，选择到第1,4,7个元素。
   通过.box > li:nth-child(-n+3)，选择到第1,2,3个元素
4. after伪类
   通过.box > li:hover::after，实现鼠标移入li元素时，显示红色边框的功能。

分析
需要新建伪类，比较麻烦，不建议。

方案2：float解决方案

html

<ul class="box">
    <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

*{
    padding: 0;
    margin: 0;
}
body{
    padding: 50px;
}
li{
    list-style: none;
}
.box{
    width: 300px;
    height: 300px;
}
.box > li{
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    border: 4px solid #ccc;
    float: left;
    line-height: 100px;
    text-align: center;
    margin-left: -4px;
    margin-top: -4px;
    position: relative;
}
.box > li:nth-child(3n+1){
    margin-left: 0;
}
.box > li:nth-child(-n+3){
    margin-top: 0;
}
.box > li:hover::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 4px solid red;
    left: -4px;
    top: -4px;
    z-index: 2;
}

知识点

1. float: left;
   通过float: left;，让li元素全部左浮动。当一行排不下时，自动换行。
2. box-sizing
   通过box-sizing: border-box，设置盒模型为IE模型。默认是标准模型(content-box)
3. css选择器
   通过.box > li:nth-child(3n+1)，选择到第1,4,7个元素。
   通过.box > li:nth-child(-n+3)，选择到第1,2,3个元素
4. after伪类
   通过.box > li:hover::after，实现鼠标移入li元素时，显示红色边框的功能。

分析
需要新建伪类，比较麻烦，不建议。

方案3：flex解决方案

html

<ul class="box">
    <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

*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
body{
    padding: 50px;
}
.box{
    width: 300px;
    display: flex;
    flex-wrap: wrap;
}
.box > li{
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    box-sizing: border-box;
    border: 4px solid #ccc;
    margin-left: -4px;
    margin-top: -4px;
}
.box > li:nth-child(3n+1){
    margin-left: 0;
}
.box > li:nth-child(-n+3){
    margin-top: 0;
}
.box > li:hover{
    border: 4px solid red;
    z-index: 2;
}

知识点

1. flex布局
   通过flex-wrap:wrap,让弹性盒元素在必要的时候拆行。默认值是nowrap。
2. box-sizing
   通过box-sizing: border-box，设置盒模型为IE模型。默认是标准模型(content-box)
3. css选择器
   通过.box > li:nth-child(3n+1)，选择到第1,4,7个元素。
   通过.box > li:nth-child(-n+3)，选择到第1,2,3个元素
4. z-index
   在最新的CSS3中，父元素为flex盒子的情况下，可以使用index。

分析
代码清晰简洁，推荐采用。

方案4：Table解决方案

html

<div class="box">
    <div class="row">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
    <div class="row">
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
    <div class="row">
        <span>7</span>
        <span>8</span>
        <span>9</span>
    </div>
</div>

css

*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
body{
    padding: 50px;
}
.box{
    width: 300px;
    display: table;
    border: 4px solid #ccc;
    border-collapse:collapse; 
}
.box > .row{
    display: table-row;
}
.box > .row > span{
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    display: table-cell;
    box-sizing: border-box;
    border: 4px solid #ccc;
    position: relative;
}
.box > .row > span:hover::after{
    content: '';
    position: absolute;
    border: 4px solid red;
    width: 100%;
    height: 100%;
    left: -4px;
    top: -4px;
}

知识点

1. display: table;
   通过display: table;，设置父元素为table类型。
   通过border-collapse:collapse;,使Table的边框合并。
   通过display: table-cell;，设置子元素为table-cell类型。
2. box-sizing
   通过box-sizing: border-box，设置盒模型为IE模型。默认是标准模型(content-box)
3. after伪类
   通过.box > li:hover::after，实现鼠标移入li元素时，显示红色边框的功能。

分析
需要新建伪类，比较麻烦，不建议。