前端学习笔记：现代网页布局

主轴对齐方式#

如下图所示：

侧轴对齐方式#

如下图所示：

主轴方向#

侧轴方向#

align-content 属性定义多根轴线的对齐方式，仅在项目换行时生效。

主轴换行方式#

项目间隙#

垂直对齐#

垂直对齐vertical-align默认为基线对齐，对图片来说基线对齐会导致图片底部与文字基线对齐，导致图片底部有一定的空白。 常用的垂直对齐方式有 center, top, bottom, middle。

项目属性#

在弹性盒子布局中，如果子元素有大小，则按照其大小进行布局，否则拉伸到父元素的宽度。如果子元素宽度超过父元素宽度， 则会根据 flex-shrink 属性进行缩小。

相对定位#

相对定位是指元素相对于其原始位置进行定位。主要用于调整元素的位置，而不影响其他元素的布局。 通过设置元素的 position 属性为 relative，可以使用 top、bottom、left、right 属性来调整元素的位置。 示例：

1
.relative-box {
2
  /* 相对定位 */
3
  position: relative;
4
  /* 上偏移量为 50px */
5
  top: 50px;
6
  /* 左偏移量为 100px */
7
  left: 100px;
8
}

:::note 特点

• 元素相对于其原始位置进行定位，仍保留原来的位置，不影响其他元素的布局。
• 可以使用 top、bottom、left、right 属性来调整元素的位置，top和bottom属性同时设置时，仅生效top属性，left和right属性同时设置时，仅生效left属性。 :::

绝对定位#

绝对定位是指元素脱离正常流，并基于定位基准进行偏移。主要用于悬浮效果和弹出菜单等场景。通过设置元素的 position 属性为 absolute，可以使用 top、bottom、left、right 属性来调整元素的位置。 示例：

1
.absolute-box {
2
  /* 绝对定位 */
3
  position: absolute;
4
  /* 上偏移量为 50px */
5
  top: 50px;
6
  /* 左偏移量为 100px */
7
  left: 100px;
8
}

:::note 特点

• 元素脱离正常流，不占用文档流的空间，不保留原来的位置，其他元素会占用该元素原来的位置。
• 可以使用 top、bottom、left、right 属性来调整元素的位置，top和bottom属性同时设置时，仅生效top属性，left和right属性同时设置时，仅生效left属性。
• 定位基准默认为最近的非静态定位祖先元素，如果所有祖先元素都是静态定位，则定位基准为文档.body元素。 :::

:::note 定位布局技巧 常使用父元素为相对定位，子元素为绝对定位，来实现定位布局。原因是：

• 如果子元素设置为绝对定位，而父元素没有设置为相对定位，则子元素的定位基准为文档.body元素，因此我们通常将父元素设置为相对定位，子元素设置为绝对定位，来实现定位布局。
• 父元素需要保留原来的位置，不能影响其他元素的布局，因此我们通常将父元素设置为相对定位。 :::

固定定位#

固定定位是指元素脱离正常流，并基于视口进行偏移。主要用于固定导航栏、吸顶效果等场景。通过设置元素的 position 属性为 fixed，可以使用 top、bottom、left、right 属性来调整元素的位置。 示例：

1
.fixed-box {
2
  /* 固定定位 */
3
  position: fixed;
4
  /* 上偏移量为 50px */
5
  top: 50px;
6
  /* 左偏移量为 100px */
7
  left: 100px;
8
}

:::note 特点

• 元素脱离正常流，不占用文档流的空间，不保留原来的位置，其他元素会占用该元素原来的位置。
• 可以使用 top、bottom、left、right 属性来调整元素的位置，top和bottom属性同时设置时，仅生效top属性，left和right属性同时设置时，仅生效left属性。
• 固定定位元素会固定在视口上，无论用户滚动页面与否，元素都保持在固定位置。 :::

粘性定位#

粘性定位是指元素在滚动到某个位置时，固定在该位置，直到滚动到某个位置后，元素才会脱离固定位置。主要用于吸顶效果等场景。通过设置元素的 position 属性为 sticky，可以使用 top、bottom、left、right 属性来调整元素的位置。 示例：

1
.sticky-box {
2
  /* 粘性定位 */
3
  position: sticky;
4
  /* 上偏移量为 50px */
5
  top: 50px;
6
}

:::note 特点

• 元素在滚动到某个位置时，固定在该位置，直到滚动到某个位置后，元素才会脱离固定位置。
• 可以使用 top、bottom、left、right 属性来调整元素的位置，top和bottom属性同时设置时，仅生效top属性，left和right属性同时设置时，仅生效left属性。
• 必须指定至少一个方向的偏移量，才会生效粘性定位。
• 父元素的 overflow 属性必须为 auto 或 scroll，否则粘性定位不会生效。 :::

层叠顺序#

层叠顺序是指元素在页面上的显示顺序，主要用于解决元素重叠问题。通过设置元素的 z-index 属性来调整元素的层叠顺序。 示例：

1
.layer-box {
2
  /* 层叠顺序 */
3
  z-index: 1;
4
}

:::note 特点

• 元素的层叠顺序可以通过 z-index 属性来调整，z-index 较大的元素会显示在 z-index 较小的元素之上。
• 层叠顺序只在元素的 position 属性为 absolute、relative、fixed 或 sticky 时才会生效。
• 默认层叠顺序为 auto，层叠顺序为 0。相同层叠顺序的元素，后出现的元素会显示在前面。 :::

对齐方式#

网格布局可以通过 justify-items、align-items、justify-content、align-content 等属性来调整元素的对齐方式。 示例：

1
.grid-box {
2
  /* 网格布局 */
3
  display: grid;
4
  /* 网格列数 */
5
  grid-template-columns: 1fr 1fr 1fr;
6
  /* 网格行数 */
7
  grid-template-rows: 1fr 1fr 1fr;
8
  /* 网格容器水平方向对齐方式 */
9
  justify-content: center;
10
  /* 网格容器垂直方向对齐方式 */
11
  align-content: center;
12
  /* 水平方向对齐方式 */
13
  justify-items: center;
14
  /* 垂直方向对齐方式 */
15
  align-items: center;
16
}

TIP

justify-items,align-items 用于调整网格内容的对齐方式， justify-content、align-content 用于调整网格容器内的对齐方式。

网格间距#

网格布局可以通过 gap 或 column-gap、row-gap 等属性来调整网格间距。 示例：

1
.grid-box {
2
  /* 网格布局 */
3
  display: grid;
4
  /* 网格列数 */
5
  grid-template-columns: 1fr 1fr 1fr;
6
  /* 网格行数 */
7
  grid-template-rows: 1fr 1fr 1fr;
8
  /* 网格间距 */
9
  gap: 20px;
10
}

响应式布局#

响应式布局是指根据不同的屏幕尺寸，自动调整页面布局，以适应不同的设备。主要用于移动设备等场景。 使用auto-fill和auto-fit可以实现响应式布局。

• auto-fill：会自动填充网格容器内的元素，当网格容器内的元素数量不足时，会自动添加空元素。
• auto-fit：会自动填充网格容器内的元素，当网格容器内的元素数量不足时，会自动拉伸元素，以填充网格容器。

跨行/l跨列#

网格布局可以通过 grid-column、grid-row 等属性来调整元素的跨列/跨行情况。 示例：

1
.grid-box {
2
  /* 网格布局 */
3
  display: grid;
4
  /* 网格列数 */
5
  grid-template-columns: 1fr 1fr 1fr;
6
  /* 网格行数 */
7
  grid-template-rows: 1fr 1fr 1fr;
8
}
9

10
.grid-box .grid-item {
11
  /* 跨列 */
12
  grid-column: 1 / span 2;
13
  /* 或者 */
14
  grid-column: 1 / 3;
15
  /* 跨行 */
16
  grid-row: 1 / span 2;
17
  /* 或者 */
18
  grid-row: 1 / 3;
19
}

网格填充方式#

网格布局可以通过 grid-auto-flow 属性来调整网格填充方式。

• grid-auto-flow: row：会按行填充网格容器内的元素，当网格容器内的元素数量不足时，会自动添加空元素。
• grid-auto-flow: column：会按列填充网格容器内的元素，当网格容器内的元素数量不足时，会自动添加空元素。

边框与阴影#

通过边框border和阴影box-shadow可以为元素添加边框和阴影效果，达到相似的视觉效果
但是，边框会增大盒子大小，影响其他元素的排列；阴影不占位置，不会影响布局。

绝对定位的垂直居中#

先用top: 50%将元素垂直居中，再用transform: translateY(-50%)将元素向上移动自身高度的一半，即可实现垂直居中。 示例：

1
.absolute-box {
2
  /* 绝对定位 */
3
  position: absolute;
4
  /* 上偏移量为 50% */
5
  top: 50%;
6
  /* 向上移动自身高度的一半 */
7
  transform: translateY(-50%);
8
}

flex中子元素是否压缩#

在不换行的情况下，如果使用width属性为子元素设置宽度，所有子盒子会占据父元素的宽度，出现压缩情况。 而使用 flex: 0 0 200px 可以为子元素设置固定宽度，可能会导致子元素超出父元素宽度。

添加滚动条#

1
.scroll-box {
2
  /* 开启垂直滚动条 */
3
  overflow-y: auto;
4
  /* 开启水平滚动条 */
5
  overflow-x: auto;
6
  /* 隐藏滚动条轨道 */
7
  scrollbar-width: none;
8
}
9
/* 隐藏 webkit 浏览器的滚动条轨道 */
10
.scroll-box::-webkit-scrollbar {
11
  display: none;
12
}

单行文本隐藏溢出#

1
.single-line-ellipsis {
2
  /* 隐藏超出文本并显示省略号（单行） */
3
  overflow: hidden;       /* 隐藏溢出内容 */
4
  text-overflow: ellipsis;/* 使用省略号表示被截断的文本 */
5
  white-space: nowrap;    /* 强制单行显示，阻止换行 */
6
}

适应容器#

object-fit 可以使元素的内容适应容器的尺寸，主要用于图片等元素。 示例：

1
.object-fit-box {
2
  /* 适应容器 */
3
  object-fit: cover;
4
}

repeat()函数#

对于网格布局的 grid-template-columns、grid-template-rows 属性，repeat() 函数可以用于重复设置网格列数或行数。 示例：

1
.grid-box {
2
  /* 网格布局 */
3
  display: grid;
4
  /* 网格列数 */
5
  grid-template-columns: repeat(3, 1fr);
6
  /* 网格行数 */
7
  grid-template-rows: repeat(3, 1fr);
8
}

鼠标样式#

通过 cursor 属性可以为元素设置鼠标悬停时的样式。 示例：

1
.cursor-box {
2
  /* 鼠标悬停样式 */
3
  cursor: pointer;
4
}