CSS布局技术

几种常见的CSS布局技术：

1.流式布局（Fluid Layout）：流式布局是一种相对于浏览器窗口大小而自动调整的布局方式。使用百分比单位或者是弹性布局（Flexbox）等技术来实现。通过设置元素的宽度和高度为百分比值，使得页面能够根据浏览器窗口大小的变化而自适应调整。
示例：

.container {
  width: 100%;
}

.box {
  width: 50%;
  height: 200px;
}

2.响应式布局（Responsive Layout）：响应式布局是指能够在不同设备和屏幕尺寸上都能良好显示和适应的布局方式。可以使用媒体查询（Media Queries）来针对不同的屏幕尺寸应用不同的样式。
示例：

.container {
  width: 100%;
}

.box {
  width: 100%;
  height: 200px;
}

@media (min-width: 768px) {
  .box {
    width: 50%;
  }
}

@media (min-width: 1024px) {
  .box {
    width: 33.33%;
  }
}

3.栅格布局（Grid Layout）：栅格布局是一种以网格系统为基础的布局方式，可以将页面分割成多个网格区域，并在这些网格区域中放置元素。通过使用grid-template-columns和grid-template-rows来定义网格列和行的大小。
示例：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 10px;
}

.box {
  background-color: #ccc;
  padding: 10px;
}

5.弹性布局（Flexbox）：弹性布局是一种灵活的布局方式，可以轻松实现水平和垂直居中、等高列布局等效果。通过设置容器的display属性为flex，并使用justify-content和align-items等属性来控制子元素的排列。
示例：

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

.box {
  width: 200px;
  height: 200px;
}

6.定位布局（Positioning）：定位布局是通过使用CSS定位属性（如相对定位、绝对定位）来控制元素的位置和布局。可以使用定位属性结合偏移属性（如top、bottom、left、right）来精确定位元素。
示例：

.container {
  position: relative;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}