margin改变容器尺寸

要改变页面的尺寸而不改变 div 的排列顺序，可以使用 CSS 中的 flexbox 布局来实现。具体的步骤如下： 1. 在页面的父元素上设置 display: flex; 属性，使其成为一个 flex 容器。 2. 使用 flex 属性来控制子元素的宽度和高度，以及它们在容器中的排列顺序。例如，可以使用 flex-grow 属性来让一个元素自动填充剩余空间，使用 flex-shrink 属性来控制元素在空间不足时缩小的比例，使用 order 属性来改变元素的排列顺序。 3. 使用 media query 来设置不同屏幕尺寸下的布局。例如，可以在较小的屏幕上使用垂直布局，而在较大的屏幕上使用水平布局。 下面是一个示例代码，演示如何使用 flexbox 布局来改变页面尺寸而不改变 div 排列顺序： HTML 代码： ``` <div class="container"> <div class="box red"></div> <div class="box green"></div> <div class="box blue"></div> </div> ``` CSS 代码： ``` .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .box { flex: 1 1 30%; height: 200px; margin: 10px; } .red { background-color: red; } .green { background-color: green; } .blue { background-color: blue; } @media screen and (max-width: 768px) { .container { flex-direction: column; align-items: center; } } ``` 在上面的示例代码中，我们使用了 flexbox 布局来设置三个子元素的宽度、高度和排列顺序。同时，我们使用 media query 来设置在屏幕尺寸较小的情况下，将容器的方向改为垂直，并且让子元素在垂直方向上居中对齐。这样，无论在什么尺寸下，都能保持 div 的排列顺序不变，而只是改变页面的尺寸。