1. 流式布局（Fluid Layout）：
流式布局是相对于视口宽度而言的，元素的宽度使用相对单位（如百分比）来定义，使得页面能够在不同设备上适应不同屏幕尺寸。
.container {
width: 80%;
margin: 0 auto; /* 居中 */
}
2. 栅格布局（Grid Layout）：
CSS Grid Layout 是一种强大的二维布局系统，可以轻松地创建复杂的网格结构，使得页面元素的排列更加灵活。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
3. 弹性盒子布局（Flexbox Layout）：
Flexbox 布局是一种单维度的布局系统，适用于一行或一列的元素。它提供了更直观的布局方式，特别适用于水平和垂直居中。
.container {
display: flex;
justify-content: space-between;
}
4. 响应式布局（Responsive Layout）：
响应式布局通过媒体查询（Media Queries）实现，根据设备宽度或其他条件应用不同的样式，以适应不同的屏幕尺寸。
@media (max-width: 600px) {
.container {
width: 100%;
}
}
5. 定位布局（Positioned Layout）：
定位布局使用 position 属性来将元素定位在其父元素内的特定位置，可以使用 absolute、relative、fixed 等值。
.positioned-element {
position: absolute;
top: 20px;
left: 50px;
}
这些布局技术可以组合使用，根据项目需求选择最合适的方法。例如，你可以使用 Flexbox 或 Grid 进行整体的页面布局，而在某些特殊情况下使用定位布局。响应式设计则是确保网页在各种设备上都能提供最佳用户体验的关键。
转载请注明出处：http://www.pingtaimeng.com/article/detail/12552/CSS