蓝桥杯web组--电影院排座位

目录

题目背景：

问题描述

初始效果图

​编辑 完成后效果图

解决方案：

1.传统布局思路

 2.flex布局思路

 总结

---

题目背景：

随着人们生活水平的日益提升，电影院成为了越来越多的人休闲娱乐，周末放松的好去处。各个城市的电影院数量也随着市场的需求逐年攀升。近日，又有一个电影院正在做着开张前期的准备，小蓝作为设计工程师，需要对电影院的座位进行布局设计。

---

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下： 

├── css
│   └── style.css
└── index.html

问题描述

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

初始效果图

 完成后效果图

index结构

---

解决方案：

1.传统布局思路

/* TODO：待补充代码 */
.seat{
  float: left;
  margin-left: 10px;
  margin-top: 10px;
}
/* 与大屏幕的距离 */
.seat-area{
  margin-top: 50px;
}
/* 消除第一行的上外边距，必须写(-n+8),写成(8-n)无效！！ */
.seat:nth-child(-n+8){
  margin-top: 0;
}
/* 消除第一列的左外边距，必须写成(8n+1),写成(1+8n)无效！！ */
.seat:nth-child(8n+1){
  margin-left: 0;
}
/* 走廊的间隔20px加上下一列的左外边距10px等于30px */
.seat:nth-child(4n-2){
  margin-right: 20px;
}

注意 ：(-n+8),写成(8-n)无效！！

可以看到，第一列的上外边距并没有消除，改成 (-n+8)后，效果如下

 可以看到，第一列的上外边距已经消除了，后面消除第一列的左外边距也是同理

 2.flex布局思路

/* TODO：待补充代码 */
.seat-area{
  /* 与大屏幕的距离40px+第一行的上外边距10px等于40px */
  margin-top: 40px;
  display: flex;
  /* 换行 */
  flex-wrap: wrap;
}
.seat{
  margin-top: 10px;
  margin-left: 10px;
}
.seat:nth-child(8n+1){
  margin-left: 0;
}
.seat:nth-child(4n-2){
  margin-right: 20px;
}

 总结

本题主要考察css3的布局思路，先读懂题目，就能迅速把题做出来，要注意的是nth-child()里面的公式，考试的时候如果发现不行，不妨换个顺序试试，蓝桥杯考试题目要么0分要么满分，注意细节才能决定成败，博主以后也会分享其他题目的细节问题，祝大家都在明年的比赛中取得良好的名次！