web布局方式全面理解

其中包含关系大概如下图1.1，我将从上之下逐个介绍

                                        图1.1

混合布局：
        是一种布局方案，概念是：结合以上多种布局方法，根据具体情况灵活应用，以实现更复杂的页面布局效果。

自适应布局：

        是一种布局方案，概念是：针对特定的设备或屏幕尺寸设计不同的布局方案。

响应式布局：

        是一种布局方案，概念是：可以根据设备的宽度和高度动态地进行调整，以确保页面在各种设备上都能提供最佳的显示效果。

浮动布局：

     是一种布局方式，当你给一个元素设置了浮动属性后，该元素会脱离文档的正常流动，向左或向右移动，直到它的边缘碰到了包含它的容器边缘或其他浮动元素的边缘。你可以理解他在普通文档流上面加一层，然后下面那层文档流会自动避开浮动元素

多列布局：

        是一种布局方案，概念是：将页面内容分成多个列显示的布局方式。可以使用css的column-count 和 column-width，也可以使用浮动。

定位布局：

   是一种布局方案，概念是：定位布局是指通过定位元素的位置来控制其在页面上的显示方式。常见的定位方式包括相对定位（position: relative）、绝对定位（position: absolute）和固定定位（position: fixed）。

表格布局：

        是一种布局方案，概念是：表格布局是通过 HTML 表格元素来创建页面布局的一种方法。虽然表格布局在过去曾经流行，但现在已经不再推荐使用，因为它们通常会导致代码冗余和性能问题。

流式布局：

        是一种布局方案，流式布局是指网页布局可以根据不同的屏幕尺寸和设备响应式地调整布局。

flex布局：

        是一种方案，概念是，一种单维度的布局模型，适用于在一个方向上排列元素，通常是水平方向或垂直方向。

grid布局：

        Grid 是一种二维的布局模型，允许您在行和列上创建复杂的网格结构，并在网格中放置元素。