浅谈CSS网页的几种布局

在进行网页布局时，CSS提供了多种方式，下面将详细讲解 css 网页的几种布局以及两个示例。

流式布局

流式布局是一种基于百分比的布局方式，会根据浏览器窗口的大小来调整页面的尺寸。

关键属性：
- width: 百分比宽度

优点：
- 兼容性好
- 页面可以随着窗口大小调整自适应
- 对SEO友好

缺点：
- 页面元素不能做到完全固定
- 当窗口过小或过大时，页面布局可能会出现问题

示例代码：

.container {
  width: 90%;
  margin: 0 auto;
}

.box {
  width: 30%;
  float: left;
  margin: 0 5% 20px;
}

弹性盒子布局

弹性盒子布局又称为Flex布局，它可以改变页面中元素的尺寸和位置，通过设置盒子的大小、方向、对齐方式等属性来进行布局。

关键属性：
- display: flex
- flex-direction: 盒子的方向(row/column)
- justify-content: 水平对齐方式
- align-items: 垂直对齐方式

优点：
- 灵活性好
- 可以支持多种设备和分辨率，适配程度高
- 可以根据页面元素的大小调整容器的大小

缺点：
- 兼容性稍差
- 学习成本较高

示例代码：

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.box {
  flex: 1;
}

栅格布局

栅格布局是通过将页面水平划分为若干个栏位，在不同的栏位中放置页面元素来实现布局的。

关键属性：
- display: grid
- grid-template-columns: 栏位大小

优点：
- 常用于Web应用程序，可以快速建立响应式布局
- 方便对页面元素的位置进行控制
- 可以根据屏幕分辨率动态调整元素的大小和位置

缺点：
- 兼容性较差
- 学习成本较高

示例代码：

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

.box {
  background-color: #eee;
  padding: 10px;
  text-align: center;
}

以上就是 CSS 网页布局的几种方式。