对CSS学习已经接近尾声，下面你可以对以下两道“小卡拉米”测试进行测试下CSS理解程度。
题 1：使用弹性盒（Flexbox）布局
题目要求：
创建一个包含三个内容区块的页面布局，页面宽度为 100%，每个区块高度固定为 200px，宽度随浏览器窗口自适应排列。第一个区块靠左，第二个区块居中，第三个区块靠右，三个区块的宽度平分父容器的空间。
代码示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒布局测试</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: space-around; /* 让子元素水平等距分布 */
height: 100vh; /* 让整个页面占满可视区域 */
align-items: center; /* 垂直居中 */
}
.box {
display: flex;
justify-content: center;
align-items: center;
width: 30%; /* 每个区块占父容器的30%宽度 */
height: 200px;
background-color: lightcoral;
}
.box:nth-child(2) {
background-color: lightseagreen; /* 给第二个区块不同的背景色 */
}
.box:nth-child(3) {
background-color: lightblue; /* 给第三个区块不同的背景色 */
}
</style>
</head>
<body>
<div class="box">区块 1</div>
<div class="box">区块 2</div>
<div class="box">区块 3</div>
</body>
</html>
示例解释：
- 弹性盒模型的使用：通过给
body元素设置display: flex，让三个子元素成为弹性盒布局的子项。 - 空间分配：
justify-content: space-around属性确保子元素在父容器内水平等距排列。由于子元素有width: 30%，每个区块将占据 30% 的宽度，剩下的 10% 会被space-around平均分布到区块之间。 - 垂直对齐：使用
align-items: center，将子项在父容器的垂直方向居中，且整个页面通过height: 100vh占据整个可视高度。 - 背景色变化：使用
nth-child选择器给不同的区块分配了不同的背景色。
题 2：使用栅格和浮动布局
题目要求：
创建一个三栏布局的页面，中间一栏为主内容，左右两栏为侧边栏，页面整体宽度为 1200px。左侧栏和右侧栏各宽度为 200px，主内容栏宽度为 800px。要求左侧栏和右侧栏通过浮动实现，中间主内容栏自适应填充剩余空间。
代码示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>栅格与浮动布局测试</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 1200px;
margin: 0 auto; /* 让容器水平居中 */
overflow: hidden; /* 清除浮动影响 */
}
.sidebar-left, .sidebar-right {
width: 200px;
height: 300px;
background-color: lightcoral;
}
.sidebar-left {
float: left; /* 左侧栏左浮动 */
}
.sidebar-right {
float: right; /* 右侧栏右浮动 */
}
.main-content {
margin: 0 200px; /* 确保主内容区不会被侧边栏覆盖 */
height: 300px;
background-color: lightseagreen;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar-left">左侧边栏</div>
<div class="main-content">主内容区域</div>
<div class="sidebar-right">右侧边栏</div>
</div>
</body>
</html>
示例解释：
- 浮动布局的使用：
sidebar-left使用float: left将其左浮动，sidebar-right使用float: right将其右浮动。这样左侧栏靠左对齐，右侧栏靠右对齐。 - 主内容区的自适应：通过给
main-content设置margin: 0 200px，确保主内容区在两侧栏之间居中，不会被浮动的元素覆盖。 - 清除浮动影响：为了防止浮动的影响导致父元素高度坍塌，给
.container设置overflow: hidden以清除浮动。 - 栅格布局：整体布局是基于固定宽度的栅格系统构建的，左右两侧各 200px，主内容区域为 800px，加起来正好是 1200px。
通过这两道测试题，你可以全面测试对 Flexbox（弹性盒）、浮动布局 以及 栅格布局 的理解。这些布局方式广泛应用于网页开发中，帮助构建灵活且兼容的页面设计。
