题目：实现如下“九宫格”，当鼠标移入的时候，当个格子的边框变红。
微信图片_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;
}
知识点
- display: inline-block
通过display: inline-block，让li元素排列在一行中。当一行排不下时，自动换行。 - box-sizing
通过box-sizing: border-box，设置盒模型为IE模型。默认是标准模型(content-box) - css选择器
通过.box > li:nth-child(3n+1)，选择到第1,4,7个元素。
通过.box > li:nth-child(-n+3)，选择到第1,2,3个元素 - 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;
}
知识点
- float: left;
通过float: left;，让li元素全部左浮动。当一行排不下时，自动换行。 - box-sizing
通过box-sizing: border-box，设置盒模型为IE模型。默认是标准模型(content-box) - css选择器
通过.box > li:nth-child(3n+1)，选择到第1,4,7个元素。
通过.box > li:nth-child(-n+3)，选择到第1,2,3个元素 - 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;
}
知识点
- flex布局
通过flex-wrap:wrap,让弹性盒元素在必要的时候拆行。默认值是nowrap。 - box-sizing
通过box-sizing: border-box，设置盒模型为IE模型。默认是标准模型(content-box) - css选择器
通过.box > li:nth-child(3n+1)，选择到第1,4,7个元素。
通过.box > li:nth-child(-n+3)，选择到第1,2,3个元素 - 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;
}
知识点
- display: table;
通过display: table;，设置父元素为table类型。
通过border-collapse:collapse;,使Table的边框合并。
通过display: table-cell;，设置子元素为table-cell类型。 - box-sizing
通过box-sizing: border-box，设置盒模型为IE模型。默认是标准模型(content-box) - after伪类
通过.box > li:hover::after，实现鼠标移入li元素时，显示红色边框的功能。
分析
需要新建伪类，比较麻烦，不建议。
网友评论