前端页面常见的布局方式有以下几种
1、文档流 --内联元素从左往右排列，块级元素从上往下排列。
2、float(浮动)布局
3、position (定位)布局
4、display inline-block (行向)布局
5、margin 布局
6、display:flex 弹性布局
7、display:grid 栅格布局1、文档流 (正常流，也叫文档流)
内联元素从左往右排列，块级 元素从上往下排列。
<p>
<span>111</span>
<span>222</span>
<span>333</span>
</p>
<div>
<el-button size="small" @click="handleCancel()">提 交</el-button>
<el-button size="small" @click="handleCancel()">返 回</el-button>
<el-button size="small" @click="handleCancel()">重 置</el-button>
</div>
这里div、p元素属于块级元素，每个元素单独占一行，span、el-button，属于内联元素，并列排，直到宽带不够，自动换行2、float(浮动)布局
CSS传统的 布局技术float 和 clear，用于实现多栏布局和处理浮动元素带来的影响，但有个缺点，会造成浮动塌陷，需要主动清除浮动。
<div class="container clearfix">
<div class="left-column">
<h2>Left Column</h2>
<p>This is the content of the left column.</p>
</div>
<div class="right-column">
<h2>Right Column</h2>
<p>This is the content of the right column.</p>
</div>
</div>
<style>
.container {
width: 100%;
overflow: auto; /* 清除浮动元素影响 */
}
.left-column {
width: 30%;
float: left;
}
.right-column {
width: 70%;
float: left;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>在这个示例中，我们创建了一个包含两个栏目的容器，分别是左栏和右栏。我们使用 float 属性将这两个栏目浮动到左侧，以实现两栏布局。
为了清除浮动元素所带来的影响，我们使用了 clearfix 类。这是一种常见的做法，通过在父元素上添加一个伪元素并设置 clear: both; 来清除浮动。
在实际项目中，推荐使用更现代的布局技术，如 Flexbox 或 Grid，以便更轻松地创建复杂的布局，并避免 float 和 clear 带来的一些问题
3、position (定位)布局
position 是 CSS 属性之一，用于控制元素在页面上的定位方式。position 属性有多个可选值，每个值都会影响元素的定位方式和如何与其他元素交互。以下是常见的 position 属性值及其作用：
- static： 这是默认值，元素按照文档流布局，不受其他定位属性的影响。设置为 static 时，top、right、bottom 和 left 属性无效。
- relative： 元素相对于其原始位置进行定位，但仍保留文档流中的位置。您可以使用 top、right、bottom 和 left 属性来设置相对偏移。
- absolute： 元素相对于其最近的已定位的父元素进行定位，如果没有已定位的父元素，则相对于文档进行定位。元素从文档流中脱离，不会占据空间。也可以使用 top、right、bottom 和 left 属性来设置绝对定位。
- fixed： 元素相对于视口进行定位，即使页面滚动也不会改变其位置。常用于创建固定在页面上某个位置的导航栏、工具栏等。
- sticky： 元素在跨越特定阈值前为相对定位，之后变为固定定位。常用于创建在页面滚动时“粘性”定位的元素，比如表头
.my-element {
position: relative; /* 或其他position值 */
top: 10px;
left: 20px;
}使用 position 属性时，务必注意元素的定位方式和影响范围，以确保您获得所需的布局效果。配合其他属性如 top、right、bottom 和 left，您可以更精确地控制元素在页面上的位置。但请谨慎使用 position 属性，以避免布局问题和复杂性。
4、display inline-block (行向)布局
display: inline-block; 是一种 CSS 属性值组合，用于在水平方向上创建行内块级元素。它结合了 display: inline; 和 display: block; 的特性，允许元素在同一行内显示，并且具有块级元素的盒模型特性。
使用 display: inline-block; 可以在不使用浮动或定位的情况下实现一些特定的布局需求，例如创建一行内的多个元素并允许设置宽度、高度和内外边距。
<div class="box">
<p>Box 1</p>
</div>
<div class="box">
<p>Box 2</p>
</div>
<div class="box">
<p>Box 3</p>
</div>
<style>
.box {
display: inline-block;
width: 150px;
height: 100px;
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
}
</style>示例中，我们创建了三个具有 display: inline-block; 样式的 div 元素，它们会在同一行内显示。每个 div 元素都具有设置的宽度、高度、内外边距和边框，且它们按照设定的间距排列。
display: inline-block; 常用于创建水平导航菜单、横向的卡片布局等。需要注意的是，由于它是行内块级元素，因此会受到行内元素的换行和空白字符影响。如果不想让它们在代码中产生额外的空白字符，可以将元素标签写在一行
5、margin 布局
使用 margin 进行布局是一种传统的 CSS 布局方法，以下是一个使用 margin 进行简单布局的示例，展示如何在一个容器中创建多个带有间距的块元素：
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<style>
.container {
width: 100%;
text-align: center; /* 居中块元素 */
}
.box {
display: inline-block;
width: 150px;
height: 100px;
margin: 10px;
background-color: #ccc;
}
</style>创建了一个具有 .container 类的容器，以及三个具有 .box 类的块元素。每个 .box 元素都具有指定的宽度、高度和 margin。通过设置 display: inline-block;，这些块元素将在同一行内显示。
通过调整 .box 元素的 margin 值，您可以控制它们之间的间距。在这个例子中，每个块元素都具有 10px 的外边距，从而在它们之间创建了一定的间距
注：需要注意的是，使用 margin 布局可能会受到外边距折叠的影响，特别是在垂直方向上。在复杂布局中，可能需要额外的 CSS 或技巧来解决这些问题
6、display:flex 弹性布局
display: flex; 是 CSS 中的一个属性，用于创建灵活的盒子模型，使其更容易实现各种布局需求。Flexbox(弹性盒模型)是一种现代的 CSS 布局技术，适用于水平和垂直方向上的布局，具有响应式设计的优势
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<style>
.container {
display: flex;
justify-content: space-between; /* 在容器内均匀分布子元素 */
}
.box {
width: 150px;
height: 100px;
background-color: #ccc;
margin: 10px;
}
</style>将.container 容器，并将其设置为 display: flex;。这使得容器内的子元素(.box 元素)成为一个弹性容器。我们还使用了 justify-content: space-between; 属性，将子元素在容器内均匀分布，创建了一种类似于多栏布局的效果。
使用 display: flex; 的优点包括更少的代码、更少的浮动、更少的清除浮动需求以及更灵活的布局控制
以下是一些常用的 Flexbox 属性：
-
容器属性(应用于父元素)
- display: 定义一个元素作为 Flex 容器。设置为 flex 会创建一个行级 Flex 容器，设置为 inline-flex 则会创建一个内联 Flex 容器。
- flex-direction: 定义 Flex 容器内项目的排列方向。可选值为 row(默认，水平排列)、column(垂直排列)、row-reverse 和 column-reverse。
- justify-content: 定义项目在主轴上的对齐方式。可选值有 flex-start、flex-end、center、space-between、space-around 等。
- align-items: 定义项目在交叉轴上的对齐方式。可选值有 flex-start、flex-end、center、baseline、stretch 等。
- align-content: 定义多根轴线的对齐方式(仅当项目在多行上排列时有效)。可选值有 flex-start、flex-end、center、space-between、space-around、stretch 等。
-
项目属性(应用于子元素)：
- order: 定义项目的排列顺序。数值越小，排列越靠前。
- flex-grow: 定义项目在剩余空间中的放大比例。
- flex-shrink: 定义项目在空间不足时的缩小比例。
- flex-basis: 定义项目的初始主轴尺寸。
- flex: 为 flex-grow、flex-shrink 和 flex-basis 的简写属性。
- align-self: 定义单个项目在交叉轴上的对齐方式，覆盖容器上的 align-items 设置。可选值有 auto、flex-start、 - flex-end、center、baseline、stretch 等。
这里只列了一部分属性，要深入了解 Flexbox，您可以参考 MDN 文档或其他 CSS 教程。
7、display:grid 栅格布局
display: grid; 是一种现代的 CSS 布局技术，用于创建二维网格布局。Grid 布局使得在水平和垂直方向上都能够非常灵活地进行布局。您可以将容器划分为行和列，并在交叉点上放置项目
以下是一些常用的 display: grid; 相关的属性：
(1)、grid-template-columns 设置列
(2)、grid-template-rows 设置行
(3)、grid-template-areas 定位空间
(4)、grid-template (1)和(2)和(3)组合使用缩写
(5)、grid-column-gap 设置列间隙
(6)、grid-row-gap 设置行间隙
(7)、grid-gap (5)和(6)组合使用缩写
(8)、justify-items 设置水平对齐内容位置
(9)、align-items 设置垂直对齐内容位置
(10)、justify-content
(11)、align-content实例如下：
<template>
<view class="content">
<view class="one-feeds-box" v-for="(data,i) in showFeedsList">
<view class="one-feed" v-for="(item,index) in data" :key="index" :class="index%6==0?(i%2==0?'feed-big-left':'feed-big-right'):''">
<navigator url="">
<img :src="item.cover" class="feed-content" mode="aspectFill" :lazy-load="true">
</navigator>
</view>
</view>
</view>
</template>
<style>
.content{
background-color: #fff;
padding-bottom: 20upx;
.one-feeds-box{
outline: 1px solid gray;
width: 704upx;
margin: 4upx 22upx 0 22upx;
display: grid;
grid-template-columns: 232upx 232upx 232upx;
grid-template-rows: 232upx 232upx 232upx;
grid-row-gap: 4upx;
grid-column-gap: 4upx;
background-color: #dadada;
.one-feed{
position: relative;
.feed-content{
width: 232upx;
height: 232upx;
border: 1px solid #eee;
border-radius: 4upx;
}
&.feed-big-left{
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
background-color: #dadada;
.feed-content {
width: 466upx;
height: 466upx;
border: 1px solid #EEEEEE;
}
}
&.feed-big-right {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
background-color: #DADADA;
.feed-content {
width: 466upx;
height: 466upx;
border: 1px solid #EEEEEE;
}
}
}
}
</style>
-
容器属性(应用于父元素)：
-
display: 将元素设置为网格容器。设置为 grid 会创建一个块级网格容器，设置为 inline-grid 则会创建一个内联网格容器。
-
grid-template-columns: 定义网格列的大小和数量。您可以指定像素、百分比、自动填充、网格轨道等值。
-
grid-template-rows: 定义网格行的大小和数量，使用的值类似于 grid-template-columns。
项目属性(应用于子元素)： -
grid-column: 定义项目所占的列数范围。例如，grid-column: 2 / 4; 表示项目占据第2列到第4列。
-
grid-row: 定义项目所占的行数范围。类似于 grid-column，您可以设置起始和结束的行号。
-
grid-area: 为项目同时定义网格行和列。可以将它们组合在一起，如 grid-area: 2 / 1 / 3 / 3;。
-
-
其他布局属性：
- grid-gap 或 gap: 定义网格行和列之间的间距。
- justify-items: 定义项目在单元格内的水平对齐方式。
- align-items: 定义项目在单元格内的垂直对齐方式。
- justify-content: 定义项目在网格容器内的水平对齐方式。
- align-content: 定义项目在网格容器内的垂直对齐方式。
使用 display: grid; 布局可以实现复杂的网格结构，包括自适应和响应式设计。您可以根据具体需求设置网格的行列，以及项目的位置和对齐方式。与 Flexbox 相比，Grid 布局在处理二维布局时更具优势。如需深入了解 display: grid; 布局，请查阅 MDN 文档或其他 CSS 教程。
以上7中页面布局在实际项目中都有所使用，推荐Flex 布局和 Grid 布局，都是现代 CSS 布局方式中非常流行的两种
1、Flex 布局相对于 Grid 布局更加灵活，列表、导航菜单之类的布局。
2、Grid 布局相对于 Flex 布局更加强大，比如网格式布局、多栏排版等，则建议选择 Grid 布局。
需要注意的是，使用 Grid 布局的话，兼容性方面需要更加考虑。而 Flex 布局的兼容性比 Grid 布局更加良好。