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

CSS 布局是网页技术的核心，用于控制元素在页面中的排列方式。以下是一些常用的布局方式：

流式布局 (Flow Layout)#

流失布局是一种简单的布局方式，元素按照文档流的顺序依次排列。每个元素都占用一行，宽度自动调整以适应容器的宽度。 在不对页面进行设置时，流式布局是默认的布局方式，也成为标准流。

标准流的所有内容都有一个 display 属性。

表单元素默认是 inline-block 元素，因为表单元素需要与文本内容进行对齐，而 inline-block 元素可以设置宽度和高度。 行内块元素中间会有空格，这是因为行内元素之间默认有空格。可以通过设置父元素 font-size 为 0 来解决这个问题。

浮动布局 (Float Layout)#

浮动布局最早是用于实现“文字环绕图片”的效果。浮动元素会脱离标准流，向左或向右浮动，直到遇到其他浮动元素或容器边缘。 浮动的方向由 float 属性指定，其属性值有向左浮动 left ，向右浮动 right 和不浮动 none 。

浮动布局的元素会脱离标准流，因此需要注意以下问题：

1. 浮动元素会脱离标准流，导致父元素高度塌陷。
2. 浮动元素之间默认没有间距，需要通过设置 margin 或 padding 来解决。
3. 浮动元素会影响标准流中的元素布局，需要注意清除浮动。

清除浮动就是让浮动尽量控制在父元素内部，不影响标准流中的元素布局。
清除浮动的主要方法：

额外标签法：在浮动元素的末尾添加一个空标签，设置其 clear: both 属性。 单伪元素法：使用伪元素 ::after 清除浮动，设置其 content: '' 和 display: block 属性。 例如：

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

双伪元素法：使用伪元素 ::before 和 ::after 清除浮动，设置其 content: '' 和 display: block 属性。 例如：

.clearfix::before,
.clearfix::after {
    content: '';
    display: block;
}
.clearfix::after {
    clear: both;
}

overflow 属性法：设置父元素 overflow: hidden 或 overflow: auto ，触发 BFC （块级格式化上下文），使父元素包含浮动元素。 例如：

.clearfix {
    overflow: hidden;
}

弹性盒子 (Flex Box)#

弹性盒子的核心是父元素控制子元素的布局，主轴控制水平方向，侧轴控制垂直方向，父元素称为弹性容器，子元素称为弹性项目。

容器属性

主轴对齐方式#

如下图所示：

侧轴对齐方式#

如下图所示：

主轴方向#

侧轴方向#

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

主轴换行方式#

项目间隙#

垂直对齐#

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

项目属性#

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

定位布局 (Position Layout)#

定位布局是指通过设置元素的 position 属性来实现布局的方式。常见的使用场景包括：

• 固定导航栏：将导航栏固定在页面顶部，无论用户滚动页面与否，导航栏都保持在顶部。
• 吸顶效果：当页面滚动到某个位置时，元素会固定在顶部，保持可见。
• 弹出菜单：点击或鼠标悬停某个按钮或链接，会弹出一个菜单，菜单内容可以是导航链接、操作按钮等。
• 悬浮效果：元素悬浮在其他元素上，通常用于显示额外的信息或操作。

相对定位#

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

.relative-box {
  /* 相对定位 */
  position: relative;
  /* 上偏移量为 50px */
  top: 50px;
  /* 左偏移量为 100px */
  left: 100px;
}

绝对定位#

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

.absolute-box {
  /* 绝对定位 */
  position: absolute;
  /* 上偏移量为 50px */
  top: 50px;
  /* 左偏移量为 100px */
  left: 100px;
}

固定定位#

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

.fixed-box {
  /* 固定定位 */
  position: fixed;
  /* 上偏移量为 50px */
  top: 50px;
  /* 左偏移量为 100px */
  left: 100px;
}

粘性定位#

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

.sticky-box {
  /* 粘性定位 */
  position: sticky;
  /* 上偏移量为 50px */
  top: 50px;
}

层叠顺序#

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

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

网格布局#

网格布局是一种二维布局系统，通过将页面划分为网格来组织元素。主要用于复杂的页面布局。通过设置元素的 display 属性为 grid，可以使用 grid-template-columns、grid-template-rows、grid-column、grid-row 等属性来调整元素的位置。 示例：

.grid-box {
  /* 网格布局 */
  display: grid;
  /* 网格列数 */
  grid-template-columns: 1fr 1fr 1fr;
  /* 网格行数 */
  grid-template-rows: 1fr 1fr 1fr;
}

对齐方式#

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

.grid-box {
  /* 网格布局 */
  display: grid;
  /* 网格列数 */
  grid-template-columns: 1fr 1fr 1fr;
  /* 网格行数 */
  grid-template-rows: 1fr 1fr 1fr;
  /* 网格容器水平方向对齐方式 */
  justify-content: center;
  /* 网格容器垂直方向对齐方式 */
  align-content: center;
  /* 水平方向对齐方式 */
  justify-items: center;
  /* 垂直方向对齐方式 */
  align-items: center;
}

网格间距#

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

.grid-box {
  /* 网格布局 */
  display: grid;
  /* 网格列数 */
  grid-template-columns: 1fr 1fr 1fr;
  /* 网格行数 */
  grid-template-rows: 1fr 1fr 1fr;
  /* 网格间距 */
  gap: 20px;
}

响应式布局#

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

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

跨行/l跨列#

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

.grid-box {
  /* 网格布局 */
  display: grid;
  /* 网格列数 */
  grid-template-columns: 1fr 1fr 1fr;
  /* 网格行数 */
  grid-template-rows: 1fr 1fr 1fr;
}

.grid-box .grid-item {
  /* 跨列 */
  grid-column: 1 / span 2;
  /* 或者 */
  grid-column: 1 / 3;
  /* 跨行 */
  grid-row: 1 / span 2;
  /* 或者 */
  grid-row: 1 / 3;
}

网格填充方式#

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

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

多列布局#

多列布局用于将页面内容分成多列显示，主要用于新闻列表、产品展示等场景。通过设置元素的 column-count 属性来指定列数，column-gap 属性来指定列间距。 示例：

.multi-column-box {
  display: column;
  /* 多列布局 */
  column-count: 2;
  /* 列间距 */
  column-gap: 20px;
  /* 分隔线样式 */
  column-rule: 1px solid #ccc;
  /* 是否跨列分割 */
  break-inside: avoid-column;
}

其他技巧#

边框与阴影#

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

绝对定位的垂直居中#

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

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

flex中子元素是否压缩#

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

添加滚动条#

.scroll-box {
  /* 开启垂直滚动条 */
  overflow-y: auto;
  /* 开启水平滚动条 */
  overflow-x: auto;
  /* 隐藏滚动条轨道 */
  scrollbar-width: none;
}
/* 隐藏 webkit 浏览器的滚动条轨道 */
.scroll-box::-webkit-scrollbar {
  display: none;
}

单行文本隐藏溢出#

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

适应容器#

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

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

repeat()函数#

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

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

鼠标样式#

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

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