网络技术问题 | CSS 测验 | 第一组 | 问题 5

介绍

在进行前端开发时，CSS 是我们经常使用的一种样式语言。本题目将考查 CSS 相关的布局问题，其中包括盒模型、定位与浮动、响应式布局等。

题目描述

请使用 CSS 实现如下布局：

考点解析

此题主要考查的是 CSS 盒模型和定位、浮动的运用。

首先，需要将整个布局视为一个容器，使用 div 或 section 标签进行包裹。接着，分别对每个区域进行具体的样式设置。

对于图中标红的模块，考虑使用 Flexbox 弹性盒布局进行排列。对于图中标黄的模块，可以运用浮动和绝对定位的方式进行摆放。外层的内容作为相对定位的盒子，子元素通过绝对定位来实现元素的位置设置。

此外，还需要关注到响应式布局。屏幕宽度较小时，可能需要对布局进行适当调整。

示例代码

### HTML

<section class="wrapper">
  <div class="sidebar">侧边栏</div>
  <div class="main">
    <div class="header">头部</div>
    <div class="content">内容</div>
    <div class="footer">底部</div>
  </div>
</section>

### CSS

.wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;

  @media (max-width: 767px) {
    flex-direction: column;
  }
}

.sidebar {
  width: 300px;
  background-color: #ccc;

  @media (max-width: 767px) {
    width: 100%;
  }
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 20px;
  position: relative;

  @media (max-width: 767px) {
    margin-left: 0;
  }
}

.header {
  height: 60px;
  background-color: #eee;
}

.content {
  flex: 1;
  background-color: #fff;

  @media (max-width: 767px) {
    width: 100%;
  }
}

.footer {
  height: 40px;
  background-color: #ddd;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

参考资料

• CSS 参考手册

• Flexbox 教程

• 响应式 Web 设计