调整浏览器大小时堆叠Div

当调整浏览器大小时，堆叠的div元素可能会发生布局变化，这通常涉及到CSS中的响应式设计。以下是一些基础概念和相关解决方案：

基础概念

CSS Flexbox：一种用于创建灵活布局的CSS模块，它可以轻松地排列和对齐容器内的项目。
CSS Grid：一个二维布局系统，允许更复杂和灵活的网页布局。
媒体查询（Media Queries）：CSS3的功能，允许内容根据不同的屏幕尺寸和设备特性来适配。

类型与应用场景

Flexbox：适用于单行或单列的布局，如导航栏、卡片布局等。
CSS Grid：适用于更复杂的二维布局，如仪表板、网格系统等。
媒体查询：广泛应用于各种需要根据屏幕尺寸调整布局的场景。

示例代码

以下是一个简单的示例，展示如何使用Flexbox和媒体查询来实现响应式的div堆叠布局：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Div Stacking</title>
<style>
  .container {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
  }
  .box {
    flex: 1 1 300px; /* 每个盒子至少300px宽，并且可以增长和收缩 */
    margin: 10px;
    background-color: #f0f0f0;
    padding: 20px;
    box-sizing: border-box;
  }
  @media (max-width: 600px) {
    .box {
      flex-basis: 100%; /* 在小屏幕上每个盒子占满一行 */
    }
  }
</style>
</head>
<body>
<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>
</body>
</html>