1、流式布局（Fluid Layout）：
- 也称为百分比布局，是一种设计方法，页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变，随着屏幕或视口（viewport）尺寸的改变，页面的布局元素宽度会随之变化，但布局的高度和大元素之间的间距固定不变。
2、响应式布局（Responsive Layout）：
- 响应式布局是流式布局的一种扩展，它强调页面不仅应该根据设备的屏幕宽度调整布局，还应该根据设备的特性（如分辨率、色彩、屏幕尺寸等）进行适配，通过使用媒体查询（Media Queries），可以为不同的设备或屏幕尺寸提供不同的样式。
3、弹性布局（Flexbox）：
- Flexbox 是一个用于创建复杂布局的 CSS3 布局系统，它允许容器中的项目能够动态地对齐、定向和分布空间，即使容器大小是动态变化或者未知的，Flexbox 布局非常适合用于设计复杂的用户界面和对齐页面上的元素。
4、网格布局（Grid Layout）：
- CSS Grid 是一个二维布局系统，可以同时处理行和列，它非常适合创建复杂的网页布局，并且具有更大的灵活性和控制能力，网格布局允许开发者将页面分割成主要区域或定义页面中小部件的布局。
5、绝对定位布局：
- 在这种布局中，元素的位置通过position: absolute; 属性来指定，这意味着元素的位置是相对于其最近的已定位祖先元素（而非通常的块父元素），如果没有已定位的祖先元素，那么它的位置是相对于初始包含块（通常是视口或页面本身）。
6、固定定位布局：
- 通过position: fixed; 属性，元素的位置是相对于浏览器窗口的，即使页面滚动，元素也始终保持在同一位置。
7、相对定位布局：
- 使用position: relative; 时，元素首先出现在正常的流中，然后相对于其正常位置进行偏移。
在选择布局系统时，开发者需要考虑项目的具体需求、目标受众以及要在哪些设备上展示内容，现代前端开发通常结合使用多种布局技术来创建灵活且响应式的用户界面。