蓝桥杯前端Web-电影院排座位

蓝桥杯前端Web赛道-电影院排座位

题目链接：1.电影院排座位 - 蓝桥云课 (lanqiao.cn)

首先看题目要求：

• 座位区域和荧幕间隔 50px。
• 座位区域每一行包含 8 个座位。
• 第 2 列和第 6 列旁边都是走廊，需要和下一列间隔 30px，其他列都只需要间隔 10px。

并且要求不修改dom结构。

题目如下：

效果如下：

首先我们观察dom结构可以发现，我们只需要更改seat-area和seat的样式即可。

在css文件中，添加seat-area样式

.seat-area {
  display: flex;
}

逐步解析，拿到题我们首先考虑使用flex布局，椅子数量太多，并且有规律的拜访，所以挨个移动不现实。

使用后变成这样

变成这样的原因是因为，包裹的宽度有限，由于使用了flex布局所以椅子会自动的缩小自己的宽度

所以我们需要在seat的样式上再加入这行代码

flex:0 0 auto

现在座椅宽度正常了但是都在一行上，所以我们需要使用flex的换行

  flex-wrap: wrap;

现在换行了，根据要求在seat-area加上距离屏幕的上边距和屏幕隔开再在seat加上右边距隔开每个椅子

margin-top: 50px; //seat-area
margin-right:10px //seat

效果如下，我们发现座位并没有位于屏幕的中间，所以再在seat-area上一行代码

justify-content: center;

这次居中了，我们再来解决每个椅子间隔的问题。

根据题目分析，我们需要在第二列和第六列隔开30px，通过观察可知，我们可以使用子选择器 选出每(8n+2)和(8n+6)的椅子，分别给出

30px的间距

.seat:nth-child(8n+2),
.seat:nth-child(8n+6){
  margin-right: 30px;
}

会出现以下情况，那么为什么会出现这种情况呢，原因是我们前面给seat都加了一个10px的右边距，由于空间不够，再加上每个椅子都有10px的外边距，所以就只能把其他盒子挤下去。此时只需要设最后一列椅子的右边距为0即可解决问题。

.seat:nth-child(8n+8){
  margin-right: 0;
}

/*或者*/
.seat-area{
  margin-right: -10px;
}

此时只需要给每一个椅子一个10px的上边距即可，如果给下边距会判断失败，且注意之前seat-area之前已经给了50px的上边距，所以我们最后还要减去10px的上边距才能答对该题。

margin-top:40px;//seat-area
margin-top:10px;//seat