前端常见布局

cccs7 Lv5
  2023-08-05 23:40:34 2023-08-05 23:40 Created   2023-08-08 22:28:54 2023-08-08 22:28 Updated      3.1k Words  12 Mins  

常见的 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: 2023-08-08 22:28:54
  • Link: https://blog.cccs7.icu/2023/08/05/前端常见布局/
  • License: This work is licensed under CC BY-NC-SA 4.0.
 Comments
On this page
前端常见布局
  1. 水平居中
    1. 使用 text-align 属性
    2. 定宽块级元素水平居中
      1. 方法一
      2. 方法二
      3. 方法三
      4. 方法四
    3. Flex 方案
    4. Grid 方案
  2. 垂直居中
    1. 行内块级元素垂直居中
    2. 定位方式实现
      1. 方法一
      2. 方法二
      3. 方式三
    3. Flex 方案
    4. Grid 方案
  3. 水平垂直居中
  4. 等分布局
    1. 浮动 + 百分比
    2. 行内块级 + 百分比
    3. Flex 方案