[分享]css上中下平均布局

CSS是前端开发中不可或缺的重要一环，它能够美化网站的外观，并增加网站交互性。其中，上中下平均布局一直是开发者们使用最多的布局之一。上中下平均布局是指将页面分成三个部分：头部、内容部分和底部，并且每一...

CSS是前端开发中不可或缺的重要一环，它能够美化网站的外观，并增加网站交互性。其中，上中下平均布局一直是开发者们使用最多的布局之一。

上中下平均布局是指将页面分成三个部分：头部、内容部分和底部，并且每一部分的高度都是平均分配的。实现这种布局有多种方式，其中一种比较常用的是使用flex布局。

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header, .footer {
  flex: 0 0 10%;
}

.content {
  flex: 1;
} 

上述代码中，我们首先定义一个class为container的元素，并将其设置为flex布局，同时设置高度为视窗的100%。我们将头部和底部的高度都设置为10%，并将内容部分的高度设置为1，使用flex属性进行布局。

此外，我们还可以使用绝对定位来实现这种布局：

.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10%;
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 10%;
}

.content {
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 0;
  right: 0;
} 

上述代码中，我们使用绝对定位来控制头部和底部，将它们分别设置在页面的顶部和底部，并将宽度设置为100%。同时，我们将内容部分的位置设置为相对于页面正文的10%的高度，宽度也设置为100%。

上中下平均布局是一种简单却实用的布局方式，它可以使网站更美观，更有吸引力。如果你还没有尝试过这种布局方式，赶快试一试吧！