7种web前端页面css（css3）布局方式,不知道最后两种方式的就亏大了

CSS3提供了许多强大的布局特性，以下是其中的七种方法：

1. Flexbox布局

   Flexbox布局提供了一种更灵活的方式来布置、对齐和分配容器内的项目空间，无论这些项目的尺寸如何。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. Grid布局

   Grid布局将容器分割成一系列的行和列，使得创建复杂的布局变得更加简单。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

3. 相对定位

   相对定位允许你相对于元素的当前位置移动它。

.box {
  position: relative;
  top: 10px;
  left: 20px;
}

4. 绝对定位

   绝对定位则相对于最近的非static定位的祖先元素进行定位。

.container {
  position: relative;
}
 
.box {
  position: absolute;
  top: 0;
  right: 0;
}

5. 浮动布局

   浮动布局可以使元素向左或向右移动，直到它的外边缘碰到包含它的容器的边框为止。

.box {
  float: left;
  margin: 5px;
}

6. 表格布局

   表格布局是通过CSS的display: table等属性来模仿HTML表格的行为。

.table {
  display: table;
  width: 100%;
}
 
.row {
  display: table-row;
}
 
.cell {
  display: table-cell;
  padding: 10px;
}

7. 使用Transform进行位置调整

   通过CSS的transform属性，你可以通过应用转换移动元素，而不会影响其他元素的布局。

.box {
  position: relative;
  transform: translate(100px, 50px);
}

这些是CSS3中实现布局的主要方式。每种方式都有其优点和适用场景，开发者可以根据具体需求选择合适的布局方式。