前端常见布局

cccs7 Lv5
  2023-08-05 23:40:34 2023-08-05 23:40:34 Created   2024-09-13 11:07:59 2024-09-13 11:07:59 Updated      

常见的 CSS 布局有以下几类：

  • 水平居中
  • 垂直居中
  • 水平垂直居中
  • 两列布局
  • 三列布局
  • 等分布局
  • Sticky Footer布局
  • 全屏布局

为保证其他的 css 代码不影响理解，下面给出的 代码只包括实现效果的代码

水平居中

模板代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script setup>

</script>

<template>
<div class="parent">
  <div class="child"></div>
</div>
</template>

<style scoped>
.parent {
  background: #ff8787;
}
.child {
  height: 300px;
  width: 300px;
  background: #e599f7;
}
</style>

初始状态：

image-20230805235659275

效果：

image-20230805235939729

使用 text-align 属性

若元素为 行内块元素，也就是 display: inline-block 的元素，可以通过为其父元素设置 text-align: center 实现水平居中。代码如下

1
2
3
4
5
6
.parent {
  text-align: center;
}
.child {
  display: inline-block;
}

text-align:center 是一个 css 属性，用于将文本内容 水平居中对齐。他可以用于 块级元素 如 div, 或者 内联级元素【行内元素】（如 span) ，text-align 接收以下值：

  • left：将文本左对齐
  • right：将文本右对齐
  • center：将文本居中对齐
  • justify：拉伸每行文本，使每行具有相等的宽度（类似于报纸和杂志中的排版）

定宽块级元素水平居中

方法一

对于定宽的块级元素实现水平居中，最简单的一种方式是 margin: 0 auto; 但是值得注意的是 一定需要设置宽度

代码如下：

1
2
3
4
.child {
  width: 300px;
  margin: 0 auto;
}

方法二

对于开启定位的元素，可以通过 left 属性 和 margin 实现

代码如下：

1
2
3
4
5
6
7
8
.child {
  height: 300px;
  width: 300px;
  background: #e599f7;
  left: 50%;
  position: relative;
  margin-left: -150px;
}
  • 开启定位
    • position: relative;
  • left 设置为 50%
  • margin-left: -150px;
    • margin-left 设置为 宽度的 一半

方法三

当元素开启绝对定位 或者 固定定位时， left 属性 和 rigth 属性 一起设置就会拉伸 元素的宽度，再配合 width 属性 和 margin 属性就可以实现水平居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.parent {
  position: relative;
  height: 300px;
}

.child {
  /* 开启定位 父相子绝 */
  position: absolute;
  /* 水平拉满屏幕 */
  left: 0;
  right: 0;
  width: 300px;
  /* 拉满屏幕之后设置宽度，最后通过 margin 实现水平居中 */
  margin: auto;
}
  1. .parent元素的position属性被设置为relative，这意味着.child元素的定位将相对于.parent元素进行。
  2. .child元素的position属性被设置为absolute，这使得它脱离了正常的文档流，并且可以根据其父元素进行定位。
  3. .child元素的left和right属性被设置为0，这使得它的左边和右边与父元素的左边和右边对齐。
  4. .child元素的width属性被设置为300px，这确定了它的宽度。
  5. 最后，通过将.child元素的margin属性设置为auto，它在水平方向上被自动分配相等的左右边距，从而实现了水平居中。

方法四

当元素开启 绝对定位 或者 固定定位时， left 属性 和 transform 属性即可实现水平居中

代码如下：

1
2
3
4
5
6
7
8
9
10
11
.parent {
  position: relative;
}

.child {
  /* 开启定位 */
  position: absolute;
  /* 该方法类似于 left 于 -margin 的用法，但是该方法不需要手动计算宽度。 */
  left: 50%;
  transform: translateX(-50%);
}
  1. .parent元素的position属性被设置为relative，这意味着.child元素的定位将相对于.parent元素进行。
  2. .child元素的position属性被设置为absolute，这使得它脱离了正常的文档流，并且可以根据其父元素进行定位。
  3. .child元素的left属性被设置为50%，这将使.child元素的左边缘相对于.parent元素的左边缘水平居中。
  4. .child元素的transform属性被设置为translateX(-50%)，这将使.child元素相对于其自身的宽度向左移动50%，从而实现水平居中。

通过将.child元素的定位设置为绝对定位，并结合使用left: 50%和transform: translateX(-50%)，可以实现水平居中的效果。这种方法不需要手动计算宽度，使得元素可以根据其内容自动调整宽度，并在水平方向上居中对齐。

Flex 方案

使用 flex 布局 可以有很多中方式实现水平居中

代码如下 

1
2
3
4
5
6
7
8
9
10
11
12
.parent {
  height: 300px;
  /* 开启 Flex 布局 */
  display: flex;
  /* 通过 justify-content 属性实现居中 */
  justify-content: center;
}

.child {
  /* 或者 子元素 margin: auto*/
  margin: auto;
}
  1. .parent元素的display属性被设置为flex，这将启用Flex布局。
  2. .parent元素的justify-content属性被设置为center，这使得.child元素在水平方向上居中对齐。
  3. .child元素的margin属性被设置为auto，这将使其在剩余空间中平均分配左右边距，从而实现水平居中。

通过将.parent元素的display属性设置为flex，并使用justify-content: center，可以实现.child元素在水平方向上居中对齐。同时，.child元素的margin: auto将帮助在剩余空间中平均分配左右边距，从而实现水平居中的效果。

Grid 方案

通过 Grid 实现 居中的方式更多一些

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.parent {
  height: 300px;
  /* 开启 Grid 布局 */
  display: grid;
  /* 方法一 */
  justify-items: center;
  /* 方法二 */
  justify-content: center;
}

.child {
  /* 方法三 子元素 margin: auto*/
  margin: auto;
}
  1. .parent元素的display属性被设置为grid，这将启用Grid布局。
  2. 方法一：.parent元素的justify-items属性被设置为center，这将使.child元素在水平方向上居中对齐。
  3. 方法二：.parent元素的justify-content属性被设置为center，这将使.child元素在水平方向上居中对齐。
  4. 方法三：.child元素的margin属性被设置为auto，这将使其在剩余空间中平均分配左右边距，从而实现水平居中。

通过将.parent元素的display属性设置为grid，可以使用Grid布局来实现水平居中。方法一和方法二都是使用Grid布局的属性来实现水平居中，分别是justify-items和justify-content。方法三是使用margin: auto来实现水平居中，这将帮助在剩余空间中平均分配左右边距，从而实现水平居中的效果。

垂直居中

实现垂直布局 方法也比较多

公共的 css 代码 如下： 

1
2
3
4
5
6
7
8
9
10
11
.parent {
  height: 500px;
  width: 300px;
  margin: 0 auto;
  background-color: #ff8787;
}
.child {
  width: 300px;
  height: 300px;
  background-color: #91a7ff;
}
image-20230806230751962

效果：

image-20230806231045303

行内块级元素垂直居中

若元素是 行内块级元素，基本思想是 使用 display: inline-block, vertical-align: middle , 并让父元素行高等同于高度

1
2
3
4
5
6
7
8
9
10
11
.parent {
  /* 为父级容器设置行高 */
  line-height: 500px;
}

.child {
  /* 将子级元素设置为 inline-block 元素 */
  display: inline-block;
  /* 通过 vertical-align: middle; 实现居中 */
  vertical-align: middle;
}
  1. .parent元素的line-height属性被设置为500px，这为父级容器设置了行高。
  2. .child元素的display属性被设置为inline-block，这将使其成为行内块级元素。
  3. .child元素的vertical-align属性被设置为middle，这将使其在垂直方向上居中对齐。

通过将.parent元素的行高设置为与父元素高度相同的值，然后将.child元素设置为行内块级元素，并使用vertical-align: middle属性，可以实现垂直居中的效果。

定位方式实现

方法一

是 通过 top: 50% margin-top: 等于﹣的高度的一半

代码如下

1
2
3
4
5
6
7
8
9
10
11
.parent {
  /* 为父级容器开启相对定位 */
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  /* margin-top: 等于负高度的一半 */
  margin-top: -150px;
}

方法二

通过定位的方式实现： top 和 bottom 将子元素拉伸至 100%， 设置指定的高度，通过 margin:auto 即可实现 垂直居中

代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.parent {
  /* 为父级容器开启相对定位 */
  position: relative;
}

.child {
  height: 300px;
  position: absolute;
  /* 垂直拉满 */
  top: 0;
  bottom: 0;
  /* margin: auto 即可实现 */
  margin: auto;
}

方式三

使用 top 配合 transform

代码如下

1
2
3
4
5
6
7
8
9
10
.parent {
  /* 为父级容器开启相对定位 */
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Flex 方案

代码如下

1
2
3
4
5
6
7
8
9
10
11
.parent {
  /* 开启 flex 布局 */
  display: flex;
  /* 方法一 */
  /* align-items: center; */
}

.child {
  /* 方法二 */
  margin: auto;
}
  1. .parent元素设置了display: flex，将其变为一个flex容器。
  2. .child元素没有设置具体的垂直居中属性，但是由于它是flex容器的子元素，会受到flex容器的属性影响。
  3. 默认情况下，flex容器的align-items属性的值为stretch，即子元素会被拉伸以填充整个容器的高度。
  4. 当子元素没有设置具体的高度时，它会被拉伸以填充整个容器的高度，从而实现垂直居中的效果。

Grid 方案

代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.parent {
  display: grid;
  /* 方法一 */
  /* align-items: center; */
  /* 方法二 */
  /* align-content: center; */
}

.child {
  /* 方法三 */
  /* margin: auto; */
  /* 方法四 */
  align-self: center;
}
  1. .parent元素设置了display: grid，将其变为一个grid容器。
  2. .child元素没有设置具体的垂直居中属性，但是由于它是grid容器的子元素，会受到grid容器的属性影响。
  3. 方法一：.parent元素设置了align-items: center，这会将所有子元素在垂直方向上居中对齐。
  4. 方法二：.parent元素设置了align-content: center，这会将所有子元素在垂直方向上居中对齐，但只有在grid容器的高度大于子元素的高度时才会生效。
  5. 方法三：.child元素设置了margin: auto，这会使子元素在垂直方向上自动填充剩余空间，从而实现垂直居中的效果。
  6. 方法四：.child元素设置了align-self: center，这会使该子元素在垂直方向上居中对齐，覆盖了grid容器的align-items属性。

水平垂直居中

等分布局

等分布局就是 将一个 容器 平均分成几等份， 这里以四等分 为例

公共 css 如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
body {
  margin: 0;
}
.container {
  height: 400px;
  background-color: #eebefa;
}
.item {
  height: 100%;
}
.item1 {
  background-color: #eccc68;
}
.item2 {
  background-color: #a6c1fa;
}
.item3 {
  background-color: #fa7d90;
}
.item4 {
  background-color: #b0ff70;
}
/* 清除浮动 */
.clearfix:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

公共 HTML 代码如下

1
2
3
4
5
6
7
<!-- 父元素清除浮动 -->
<div class="container clearfix">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
</div>

初始状态

image-20230808221959913

最终效果

image-20230808222054240

浮动 + 百分比

开启浮动，使每个元素 占 25% 的 宽度

代码如下 

1
2
3
4
5
.item {
  /* 开启浮动，每个元素占 25% 的宽度 */
  width: 25%;
  float: left;
}
  1. .item元素设置了float: left，使每个元素都向左浮动。
  2. 浮动元素不会占据父元素的空间，因此可以在一行上放置多个浮动元素。
  3. .item元素设置了width: 25%，使每个元素占据父元素宽度的25%。
  4. 由于每个元素都占据了相同的宽度，且浮动元素在一行上排列，因此可以实现等分布局的效果。

行内块级 + 百分比

这种方式与上面那种方式类似，不过需要注意的是行内块级元素有一些类似于边距的几个像素，导致各25%会超出容器。

实现CSS代码如下：

1
2
3
4
5
6
.item {
  /* 设置每个元素为行内块级元素，每个元素占 24.5% 的宽度 */
  width: 24.5%;
  /* 因为行内块级元素有一些类似于边距的几个像素，导致各占25会超出容器 */
  display: inline-block;
}
  1. .item元素设置了display: inline-block，将每个元素设置为行内块级元素。
  2. 行内块级元素可以在一行上排列，并且可以设置宽度和高度。
  3. .item元素设置了width: 24.5%，使每个元素占据父元素宽度的24.5%。
  4. 由于每个元素都占据了相同的宽度，且行内块级元素在一行上排列，因此可以实现等分布局的效果。

Flex 方案

通过 Flex 布局实现该功能主要是通过flex属性来实现。

代码如下

1
2
3
4
5
6
7
8
.container {
  /* 开启 flex 布局 */
  display: flex;
}
.item {
  /* 每个元素占相同的宽度 */
  flex: 1;
}
  1. .container元素设置了display: flex，将其变为一个flex容器。
  2. .item元素没有设置具体的宽度，但是由于它是flex容器的子元素，会受到flex容器的属性影响。
  3. .item元素设置了flex: 1，这会使每个元素占据相同的宽度，从而实现等分布局的效果。
  4. flex: 1的意思是将剩余的空间平均分配给所有的子元素，因此每个子元素都会占据相同的宽度。
  • Title: 前端常见布局
  • Author: cccs7
  • Created at : 2023-08-05 23:40:34
  • Updated at : 2024-09-13 11:07:59
  • Link: https://cs7eric.github.io/2023/08/05/前端常见布局/
  • License: This work is licensed under CC BY-NC-SA 4.0.
Comments
On this page
前端常见布局
  1. 水平居中
    1. 使用 text-align 属性
    2. 定宽块级元素水平居中
    3. Flex 方案
    4. Grid 方案
  2. 垂直居中
    1. 行内块级元素垂直居中
    2. 定位方式实现
    3. Flex 方案
    4. Grid 方案
  3. 水平垂直居中
  4. 等分布局
    1. 浮动 + 百分比
    2. 行内块级 + 百分比
    3. Flex 方案