css如何写页面布局

CSS是一种用于网页布局和样式设计的语言，有很多方法可以实现页面布局，包括表格布局、浮动布局、定位布局等等，而在本文中，我们将介绍一种常用的CSS布局方式-弹性布局。

  .container {
    display: flex; /*设置容器为弹性容器*/
    flex-wrap: wrap; /*弹性容器自动换行*/
  }
  .Box {
    flex: 1; /*子元素占据剩余空间*/
    margin: 10px; /*设置子元素之间的距离*/
  }

所谓弹性布局，就是让容器和其中的元素自适应屏幕大小，当屏幕宽度改变时，元素会自动缩放。这使得弹性布局在响应式设计中非常有用。

使用弹性布局时，容器的display属性要设置为flex，并且设置flex-direction属性来控制元素的方向：row表示水平方向，column表示垂直方向。其次，可以通过设置flex-wrap属性来控制元素换行。最后，通过设置子元素的flex属性，可以控制子元素占据剩余空间的比例。

举例来说，假设我们有一个容器展示三个方块，我们想让这些方块自适应屏幕大小并且与其他方块间隔10px，可以通过如下代码来实现：

  <div class="container">
    <div class="Box">1</div>
    <div class="Box">2</div>
    <div class="Box">3</div>
  </div>

上述代码中，每一个方块都有一个class为Box，其中的CSS代码定义了元素的宽度、高度以及背景颜色等属性，最重要的是设置了flex属性为1，这样每个元素都会平均分配剩余空间：

  .Box {
    flex: 1;
    margin: 10px;
    width: 100px;
    height: 100px;
    background-color: #ccc;
  }

总的来说，弹性布局是一种非常方便的布局方式，它可以精确地控制元素之间的距离，并能够自适应浏览器宽度的变化。如果您想让网站看起来更加现代化、简约，弹性布局将是非常不错的选择。