【今天你背面试题了嘛】常见布局20+

在HTML中，有很多常见的布局技术可以帮助你创建各种不同类型的网页布局。以下是20多种常见的HTML布局技术：

1. 基本布局：使用HTML的基本元素（如 <header>, <nav>, <main>, <footer> 等）来实现基本的页面布局结构。
2. 表格布局：使用HTML的 <table> 元素来创建表格布局。
3. 盒模型布局：使用CSS的盒模型属性（如 margin, padding, border）来调整元素的位置和大小。
4. 流动布局：使用CSS的 float 属性来实现元素的流动布局。
5. 定位布局：使用CSS的定位属性（如 position: absolute 或 position: relative）来控制元素的位置。
6. 弹性布局：使用CSS的弹性盒子布局（Flexbox）来实现自适应布局。
7. 网格布局：使用CSS的网格布局（Grid）来创建复杂的多列布局。
8. 响应式布局：使用CSS媒体查询和相对单位（如百分比、em、rem）来创建能够适应不同设备和屏幕尺寸的布局。
9. 栅格系统：使用第三方CSS框架（如Bootstrap）的栅格系统来创建响应式布局。
10. 多列布局：使用CSS的 column-count 或 column-width 属性来创建多列布局。
11. 瀑布流布局：使用CSS的多列布局和JavaScript来实现 Pinterest 风格的瀑布流布局。
12. 绝对居中布局：使用CSS的绝对定位和负边距来实现元素的绝对居中布局。
13. 粘性页眉和页脚布局：使用CSS的 position: sticky 属性来创建粘性的页眉和页脚布局。
14. 全屏布局：使用CSS的绝对定位和相对单位来创建全屏布局。
15. flex-grow 布局：使用CSS的 flex-grow 属性来实现动态调整元素尺寸的布局。
16. 悬挂式布局：使用CSS的 position: fixed 属性来创建悬挂式布局。
17. 后期展示布局：使用CSS的 display: grid 属性和JavaScript来实现逐步加载图片的布局。
18. 网格卡片布局：使用CSS的网格布局和卡片设计来创建网格卡片布局。
19. 横向滚动布局：使用CSS的 overflow-x: scroll 属性和 white-space: nowrap 属性来创建横向滚动布局。
20. 头部固定布局：使用CSS的 position: fixed 属性和JavaScript来实现头部固定的布局。

这只是一小部分HTML布局技术的示例，还有很多其他布局技术可以根据你的需要进行使用。具体使用哪种布局取决于你想要创建的具体页面和设计需求。