现代网页布局

现代网页布局的核心问题是：如何把一个个 HTML 元素稳定、整齐、可维护地摆到页面上。

这篇笔记包括显示模式转换、浮动、清除浮动、Flex 弹性布局、定位布局、Grid 网格布局、多栏布局、滚动容器、图片对齐与缩放，以及“小兔鲜首页项目”中的真实页面布局思路。

一、布局前的基础准备

现代布局通常先做 CSS 初始化，减少浏览器默认样式干扰。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul,
ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: #333;
}

img {
  vertical-align: middle;
}

常见作用：

代码 作用
margin: 0 清除默认外边距
padding: 0 清除默认内边距
box-sizing: border-box 让盒子宽高包含 padding 和 border，尺寸更好算
list-style: none 清除列表默认小圆点或编号
text-decoration: none 清除链接默认下划线
vertical-align: middle 让图片和文字垂直方向更协调，也能减少图片底部缝隙

项目中还常写一个版心类：

1
2
3
4
.w {
  width: 1240px;
  margin: 0 auto;
}

版心的作用是让页面主体内容固定在一个宽度内，并整体水平居中。

二、display显示模式转换

display 决定元素如何参与布局。

1. block：块级显示

1
2
3
4
5
6
7
.subbar ul li a {
  display: block;
  height: 42px;
  line-height: 42px;
  color: #fff;
  padding-left: 20px;
}

把 a 标签转成块级元素后：

  • 可以设置宽高。
  • 可以独占一行。
  • 整行都可以点击，适合侧边栏菜单、导航项。

2. inline-block：行内块显示

1
2
3
4
5
6
7
8
9
.list a {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  background-color: #ccc;
  border-radius: 5px;
  padding: 0 15px;
  margin: 4px;
}

inline-block 的特点：

  • 像行内元素一样可以一行显示多个。
  • 像块级元素一样可以设置宽高、内外边距。
  • 适合标签、按钮、分页、小导航。

3. inline-block之间的空隙

多个 inline-block 元素之间可能出现空白间隙，因为 HTML 中的换行和空格会被当作文本空白。

示例中用父元素设置 font-size: 0 解决：

1
2
3
4
5
6
7
8
9
10
.box {
  font-size: 0;
}

.box li {
  display: inline-block;
  width: 200px;
  height: 300px;
  font-size: 14px;
}

父元素清掉空白字符的字号，子元素再恢复文字大小。

三、浮动布局

浮动是早期常用布局方式，现在大部分布局可以用 Flex 或 Grid 替代，但理解浮动仍然很重要。

1
2
3
4
5
6
7
8
9
10
11
.box li {
  float: left;
  width: 190px;
  height: 200px;
  margin-right: 15px;
  margin-bottom: 15px;
}

.box li:nth-child(3n) {
  margin-right: 0;
}

浮动特点：

  • float: left 让元素向左排列。
  • 浮动元素会脱离普通文档流。
  • 常用于多列排列、图文环绕。
  • 父元素如果没有固定高度，可能因为子元素浮动而高度塌陷。

常见取值：

属性 取值 作用
float left 左浮动
float right 右浮动
float none 不浮动，默认值

四、清除浮动

浮动元素脱离文档流后，父元素可能包不住子元素，后面的元素会顶上来。

1. 额外标签法

1
2
3
4
5
<div class="main">
  <div class="son1"></div>
  <div class="son2"></div>
  <div class="clear"></div>
</div>
1
2
3
.clear {
  clear: both;
}

缺点是多了无意义标签。

2. 伪元素清除法

1
2
3
4
5
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

更推荐，结构更干净。

3. 双伪元素清除法

1
2
3
4
5
6
7
8
9
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

真实项目里经常封装成公共类。

4. 父元素添加 overflow

1
2
3
.main {
  overflow: hidden;
}

简单有效，但要注意它会隐藏溢出内容，不适合需要展示浮层的容器。

五、Flex弹性布局基础

Flex 是现代网页中最常用的一维布局方案，适合处理一行或一列元素的排列、对齐、等分和换行。

核心规则：Flex 属性大多写在父元素上，父元素控制子元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
.box {
  display: flex;
  width: 80%;
  height: 150px;
  margin: 0 auto;
  gap: 10px;
}

.item {
  flex: 1;
  background-color: pink;
  border-radius: 10px;
}

理解方式：

  • 设置 display: flex 的元素叫 Flex 容器。
  • 它的直接子元素叫 Flex 项目。
  • 默认主轴是水平方向，从左到右。

六、Flex容器常用属性

1. justify-content：主轴对齐

1
2
3
4
.box {
  display: flex;
  justify-content: space-evenly;
}

常见取值：

取值 作用
flex-start 主轴起点对齐，默认值
flex-end 主轴终点对齐
center 主轴居中
space-between 两端对齐，项目之间间距相等
space-around 每个项目左右都有间距，边缘间距是中间的一半
space-evenly 所有间距完全相等

2. align-items：单行交叉轴对齐

1
2
3
4
.box {
  display: flex;
  align-items: center;
}

常见取值：

取值 作用
stretch 默认值，子项未设置高度时拉伸
flex-start 交叉轴起点对齐
flex-end 交叉轴终点对齐
center 交叉轴居中

最常见的水平垂直居中：

1
2
3
4
5
.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

3. flex-direction：修改主轴方向

1
2
3
4
5
6
.sanlian li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

常见取值：

取值 作用
row 水平方向，从左到右，默认值
row-reverse 水平方向，从右到左
column 垂直方向，从上到下
column-reverse 垂直方向，从下到上

适合“图标在上，文字在下”的按钮结构。

4. flex-wrap：强制换行

1
2
3
4
5
.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

常见取值：

取值 作用
nowrap 不换行，默认值
wrap 换行
wrap-reverse 反向换行

5. align-content：多行交叉轴对齐

当 Flex 项目换成多行时，align-items 控制的是每一行内的项目，align-content 控制多行整体在交叉轴上的分布。

1
2
3
4
5
.box {
  display: flex;
  flex-wrap: wrap;
  align-content: space-evenly;
}

常见取值和 justify-content 类似：

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly
  • stretch

6. gap：项目间距

1
2
3
4
.box {
  display: flex;
  gap: 10px;
}

gap 可以直接设置 Flex 项目之间的间距，比给每个子项写 margin-right 更干净。

也可以拆开写：

1
2
3
4
.box {
  row-gap: 16px;
  column-gap: 10px;
}

七、Flex项目常用属性

1. flex: 1 等分剩余空间

1
2
3
4
.box .item {
  flex: 1;
  height: 100px;
}

flex: 1 表示项目按份数分配可用空间。四个项目都写 flex: 1，就平均分成四份。

如果某一个写 flex: 2，它会比 flex: 1 多占一份。

2. flex复合写法

示例中的横向滚动卡片：

1
2
3
.box ul li {
  flex: 0 0 200px;
}

含义：

1
flex: flex-grow flex-shrink flex-basis;
部分 示例值 作用
flex-grow 0 是否放大，0 表示不放大
flex-shrink 0 是否压缩，0 表示不压缩
flex-basis 200px 初始主轴尺寸

flex: 0 0 200px 常用于横向滚动列表，让每个卡片保持固定宽度。

3. 固定列数的多行Flex写法

淘宝式写法：给项目固定百分比，再用内层盒子承载真实内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.box {
  display: flex;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}

.box .item {
  flex: 0 0 16.666666%;
  height: 120px;
  margin-bottom: 16px;
  padding: 0 8px;
}

.item .content {
  width: 100%;
  height: 100%;
}

关键点：

  • 16.666666% 表示一行 6 列。
  • padding: 0 8px 制造左右间距。
  • 父元素负 margin 抵消两侧多出来的 padding。

京东式写法：用 calc() 把百分比和间距一起算进去。

1
2
3
4
5
6
.box .item {
  flex: 1;
  min-width: calc(16.6666667% - 16px);
  max-width: calc(16.6666667% - 16px);
  margin: 0 8px 16px;
}

关键点：

  • calc() 可以混合计算百分比和像素。
  • min-width 和 max-width 同时限制，保证每项宽度稳定。

八、Flex常见案例

1. 图标文字垂直排列

1
2
3
4
5
6
7
8
9
10
11
.sanlian {
  display: flex;
}

.sanlian li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

适合点赞、收藏、下载、个人中心入口等结构。

2. 图片瀑布流列布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.col-flex {
  display: flex;
  gap: 16px;
  width: 1180px;
  margin: 20px auto;
}

.col-flex .item {
  flex: 1;
}

.col-flex .item a {
  overflow: hidden;
  display: block;
  width: 100%;
  border-radius: 18px;
  margin-bottom: 15px;
}

.col-flex .item a img {
  width: 100%;
  display: block;
}

这个案例的布局思路：

  • 外层 Flex 分成多列。
  • 每一列内部自然从上到下排列图片。
  • 图片宽度 100% 适应列宽。
  • display: block 解决图片底部空白缝隙。
  • overflow: hidden + border-radius 让图片圆角裁剪生效。

九、图片和文字垂直对齐

图片默认是行内替换元素，底部可能有空白缝隙，也可能和文字对不齐。

1
2
3
img {
  vertical-align: middle;
}

常见处理方式：

  • 图片和文字同一行：用 vertical-align: middle。
  • 图片单独作为卡片内容：用 display: block。
  • 图片需要铺满容器：配合 width: 100%、height: 100%、object-fit。

十、定位布局基础

position 用来控制元素的位置关系。定位通常和 top、right、bottom、left 一起使用。

常见取值：

取值 作用
static 默认值，不定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘性定位

十一、相对定位 relative

1
2
3
4
5
.box1 {
  position: relative;
  top: 100px;
  left: 100px;
}

特点：

  • 相对于自己原来的位置移动。
  • 不脱离文档流。
  • 原来的位置仍然保留。
  • 不影响其他元素布局。
  • 同时设置 top 和 bottom 时，top 优先。
  • 同时设置 left 和 right 时，left 优先。

常见用途：

  • 小范围调整元素位置。
  • 作为绝对定位子元素的参考父级。

十二、绝对定位 absolute

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

.son1 {
  position: absolute;
  top: 120px;
  left: 120px;
}

特点：

  • 元素脱离正常文档流，不再占据原位置。
  • 默认相对于最近的“已定位祖先元素”移动。
  • 如果没有已定位祖先元素，则相对于浏览器视口移动。
  • 常见口诀：子绝父相。

常见用途：

  • 搜索框内部图标。
  • 购物车角标。
  • 轮播图圆点。
  • 卡片遮罩层。
  • 悬浮按钮和装饰元素。

十三、固定定位 fixed

1
2
3
4
5
6
7
8
.box {
  width: 600px;
  height: 120px;
  position: fixed;
  left: 50%;
  margin-left: -300px;
  bottom: 30px;
}

特点：

  • 脱离文档流。
  • 永远相对于浏览器视口定位。
  • 页面滚动时位置不变。
  • margin: 0 auto 对固定定位的盒子水平居中无效。

固定定位水平居中常见写法：

1
2
3
4
5
6
.fixed-box {
  position: fixed;
  left: 50%;
  width: 600px;
  margin-left: -300px;
}

也可以用现代写法：

1
2
3
4
5
.fixed-box {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
}

十四、粘性定位 sticky

1
2
3
4
.nav {
  position: sticky;
  top: 0;
}

特点：

  • 兼具相对定位和固定定位的特点。
  • 滚动到指定位置前，像相对定位。
  • 滚动到指定位置后，像固定定位。
  • 必须指定 top、bottom、left、right 这类方位属性才生效。
  • 父容器的 overflow 通常需要保持 visible。

适合：

  • 吸顶导航栏。
  • 表格固定表头。
  • 分组标题吸顶。

十五、粘性表头案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.table {
  width: 100%;
  height: calc(100% - 60px);
  overflow-y: auto;
}

.table-header {
  position: sticky;
  top: 0;
  display: flex;
  background-color: #f8f9fa;
  border-bottom: 2px solid #e0e0e0;
  font-weight: bold;
}

.table-row {
  display: flex;
}

.table-cell {
  flex: 1;
  padding: 12px;
  text-align: center;
}

这个案例不是传统 table 标签，而是用 div + flex 模拟表格：

  • .table 设置固定高度和 overflow-y: auto，内部可滚动。
  • .table-header 使用 position: sticky; top: 0 固定在滚动容器顶部。
  • .table-row 和 .table-header 都用 Flex 横向排列。
  • .table-cell { flex: 1; } 让每列平均分配宽度。
  • height: calc(100% - 60px) 用于从总高度中减掉标题区域高度。

十六、z-index叠放次序

定位元素可能互相覆盖，默认后写的元素盖住先写的元素。

1
2
3
4
5
6
7
.box img {
  position: absolute;
}

.box img:hover {
  z-index: 1;
}

规则：

  • z-index 常用于已定位元素。
  • 数值越大，越靠上。
  • 默认可以理解为 auto。
  • 如果父级形成不同层叠上下文，比较会更复杂；入门阶段先记“定位元素 + z-index 数值越大越靠上”。

十七、横向滚动布局

示例中的横向图片列表：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.box {
  position: relative;
  width: 1000px;
  margin: 100px auto;
  overflow: hidden;
}

.box ul {
  display: flex;
  gap: 15px;
  overflow-x: scroll;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.box ul::-webkit-scrollbar {
  display: none;
}

.box ul li {
  flex: 0 0 200px;
}

关键点：

  • 外层 .box 用 overflow: hidden 裁剪装饰内容。
  • 内层 ul 用 display: flex 横向排列。
  • overflow-x: scroll 允许横向滚动。
  • scrollbar-width: none 隐藏 Firefox 滚动条。
  • ::-webkit-scrollbar { display: none; } 隐藏 Chrome/Safari 滚动条。
  • flex: 0 0 200px 让每个卡片固定宽度、不放大、不压缩。
  • scroll-behavior: smooth 让滚动更平滑。

示例中还用 JS 把鼠标滚轮的纵向滚动转换成横向滚动：

1
2
3
4
5
6
const scrollContainer = document.querySelector('.box ul');

scrollContainer.addEventListener('wheel', (e) => {
  e.preventDefault();
  scrollContainer.scrollLeft += e.deltaY * 3;
});

十八、Grid网格布局基础

Grid 是二维布局方案，适合同时控制行和列，例如宫格、频道导航、复杂卡片区域。

1
2
3
4
5
.box {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

核心概念：

  • Grid 容器：设置了 display: grid 的父元素。
  • Grid 项目：Grid 容器的直接子元素。
  • 列轨道：grid-template-columns 定义。
  • 行轨道：grid-template-rows 定义。
  • 间隙：gap 定义。
  • 网格线：划分网格轨道的线，可用于项目跨行跨列。

十九、Grid容器常用属性

1. grid-template-columns / rows

1
2
3
4
5
.box {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

表示创建 3 列、3 行，每列每行都是 100px。

2. repeat()

1
2
3
4
.box {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

repeat(3, 1fr) 表示重复 3 次 1fr。

3. fr单位

1
grid-template-columns: repeat(3, 1fr);

fr 表示剩余空间的份数。三列都是 1fr，就是三等分。

4. gap间隙

1
2
3
.box {
  gap: 10px;
}

gap 设置行和列之间的间距。

可以拆分：

1
2
3
4
.box {
  row-gap: 20px;
  column-gap: 10px;
}

5. justify-content / align-content

当网格轨道总尺寸小于容器尺寸时，可以控制整个网格在容器中的位置。

1
2
3
4
.box {
  justify-content: space-between;
  align-content: space-between;
}
属性 方向
justify-content 控制网格整体在水平方向的分布
align-content 控制网格整体在垂直方向的分布

常见取值：

  • start
  • end
  • center
  • space-between
  • space-around
  • space-evenly

6. justify-items / align-items

控制每个网格项目在自己单元格中的对齐方式。

1
2
3
4
.box {
  justify-items: center;
  align-items: center;
}
属性 方向
justify-items 项目在单元格内的水平对齐
align-items 项目在单元格内的垂直对齐

常见取值：

  • stretch
  • start
  • end
  • center

二十、Grid响应式布局

1. auto-fill和minmax

1
2
3
4
5
6
.box {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  width: 80%;
  gap: 10px;
}

含义：

  • auto-fill：自动填充尽可能多的列。
  • minmax(100px, 1fr)：每列最小 100px，最大占一份剩余空间。

适合做响应式卡片列表。

2. auto-fit和auto-fill

示例中注释提到了 auto-fit：

1
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

简单理解：

  • auto-fill：尽量保留可填充的空列轨道。
  • auto-fit：如果有空轨道，倾向于折叠空轨道，让已有项目撑开。

入门时常用模板：

1
2
3
4
5
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
}

二十一、Grid项目跨行跨列

1. grid-column

1
2
3
.item:first-child {
  grid-column: 1 / span 2;
}

表示从第 1 条列线开始，跨 2 列。

也可以写成：

1
grid-column: 1 / 3;

表示从第 1 条列线到第 3 条列线。

2. grid-row

1
2
3
.item:first-child {
  grid-row: 1 / span 2;
}

表示从第 1 条行线开始，跨 2 行。

复杂布局案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  grid-auto-flow: column;
}

.box .item:first-child {
  grid-row: 1 / 3;
}

.box .item:nth-child(3) {
  grid-column: 2 / 4;
  grid-row: 2 / 3;
}

二十二、Grid自动排列方向

1
2
3
.box {
  grid-auto-flow: column;
}

常见取值：

取值 作用
row 行优先，默认值，从左到右、从上到下
column 列优先，从上到下、从左到右

二十三、Grid案例

1. 仿B站导航条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.nav {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  width: 935px;
  height: 66px;
  margin: 100px auto;
}

.nav a {
  background-color: #F6F7F8;
  border: 1px solid #F1F2F3;
  border-radius: 6px;
  text-align: center;
  line-height: 28px;
  font-size: 14px;
}

适合固定行列数量的导航布局。

2. 响应式视频宫格

1
2
3
4
5
6
7
8
9
10
11
12
13
.box {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  max-width: 1350px;
  margin: 30px auto;
  gap: 18px;
}

.box video {
  width: 100%;
  height: 100%;
  border-radius: 18px;
}

容器变宽时列数增加，变窄时列数减少。

二十四、图片缩放 object-fit

在卡片或网格中，图片经常需要填满固定比例的容器。

1
2
3
4
5
6
7
.box .item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
}

object-fit 常见取值：

取值 作用
fill 拉伸填满容器，可能变形
contain 等比例完整显示，可能留白
cover 等比例铺满容器，可能裁剪
none 保持原尺寸

object-position 常见取值：

  • center
  • top
  • bottom
  • left
  • right

如果图片被 cover 裁剪，可以用 object-position 控制重点显示区域。

二十五、多栏布局 column

多栏布局适合瀑布流式文本或高度不一致的卡片排列。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box {
  max-width: 1200px;
  margin: 30px auto;
  column-count: 4;
  column-gap: 20px;
  column-rule: 1px dashed red;
}

.box .item {
  height: 150px;
  margin-bottom: 20px;
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
}

常用属性：

属性 作用
column-count 列数
column-gap 列间距
column-rule 列之间的分割线
break-inside: avoid-column 避免元素被拆到两列中

注意：多栏布局的排列方向是先从上到下，再到下一列，和 Grid/Flex 的普通行排列不同。

二十六、鼠标样式 cursor

虽然 cursor 不直接决定元素位置，但它是布局交互体验的一部分。

1
<li style="cursor: pointer;">鼠标样式 pointer</li>

常见取值：

取值 作用
default 默认箭头
pointer 手型，常用于可点击元素
text 文本输入光标
wait 等待
help 帮助
not-allowed 禁止操作
grab 可抓取
grabbing 抓取中
zoom-in 放大
zoom-out 缩小

二十七、小兔鲜项目布局复盘

“小兔鲜首页项目”是一个完整页面，适合把前面所有布局知识串起来看。

1. 文件拆分

1
2
3
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">

常见拆分方式：

  • base.css：初始化、基础标签样式、公共工具类。
  • common.css：多个页面共用的头部、底部、版心。
  • index.css：首页独有模块。

2. 顶部快捷导航

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.shortcut {
  height: 52px;
  background-color: #333333;
}

.shortcut ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 52px;
}

.shortcut ul .line {
  width: 1px;
  height: 12px;
  background-color: #999999;
  margin: 0 15px;
}

布局点：

  • 外层设置固定高度和背景色。
  • ul 使用 Flex，内容右对齐并垂直居中。
  • 分隔线用一个 li.line 控制宽度、高度、背景色。

3. 主头部吸顶布局

1
2
3
4
5
6
7
8
9
10
.header {
  display: flex;
  height: 132px;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 999;
}

布局点：

  • display: flex 横向排列 logo、导航、搜索、购物车。
  • justify-content: space-between 分散对齐。
  • align-items: center 垂直居中。
  • position: sticky; top: 0 实现吸顶。
  • z-index: 999 保证头部覆盖在其他模块上方。

4. Logo图片替换文字

1
2
3
4
5
6
7
8
header .logo h1 a {
  display: block;
  width: 100%;
  height: 100%;
  background: url(../images/logo.png) no-repeat;
  text-indent: -9999px;
  overflow: hidden;
}

布局点：

  • 链接转块级，撑满 logo 区域。
  • 用背景图显示 logo。
  • text-indent: -9999px 隐藏文字，但 HTML 中仍保留站点名称，有利于语义。
  • overflow: hidden 隐藏被缩进出去的文字。

5. 搜索框内部图标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.search {
  position: relative;
}

.search i {
  position: absolute;
  top: 9px;
  left: 0;
}

.search input {
  width: 170px;
  height: 40px;
  border-bottom: 2px solid #F4F4F4;
  padding-left: 28px;
}

布局点：

  • 父元素 .search 相对定位。
  • 图标绝对定位到输入框左侧。
  • 输入框设置左内边距，避免文字压住图标。

6. 购物车角标

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

.car span {
  position: absolute;
  left: 25px;
  background-color: #E26237;
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 8px;
}

布局点：

  • 父级相对定位，角标绝对定位。
  • padding + border-radius 做出胶囊形数字标记。

7. 入口区域：分类浮层 + 轮播图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.entry {
  height: 500px;
  background-color: #F5F5F5;
}

.entry .w {
  height: 100%;
  position: relative;
}

.entry .w .category {
  width: 250px;
  height: 500px;
  opacity: 0.42;
  background: #000000;
  position: absolute;
  z-index: 999;
}

布局点：

  • 入口模块固定高度。
  • 版心 .w 相对定位，给内部绝对定位元素提供参考。
  • 分类菜单绝对定位盖在轮播图上。
  • opacity 控制透明度。

轮播圆点：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.entry .w .circle {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  gap: 16px;
}

.entry .w .circle li {
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}

8. 模块头部布局

1
2
3
4
5
6
7
8
9
10
11
12
.box-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 112px;
}

.box-hd h2 small {
  margin-left: 30px;
  font-size: 16px;
  color: #A1A1A1;
}

布局点：

  • 左侧标题，右侧“查看全部”。
  • Flex 两端对齐。
  • small 用左外边距和标题拉开距离。

9. 商品卡片列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.box-bd ul {
  display: flex;
  justify-content: space-between;
}

.box-bd ul li {
  width: 304px;
  height: 404px;
  text-align: center;
  transition: all .3s;
}

.box-bd ul li:hover {
  transform: translateY(-10px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

布局点：

  • 横向卡片用 Flex。
  • 固定卡片宽高。
  • space-between 分散排列。
  • hover 时上移并加阴影，增强交互反馈。

10. 分类商品楼层

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
.w .body {
  display: flex;
  height: 610px;
}

.w .body .body-l {
  width: 248px;
  height: 610px;
  margin-right: 24px;
}

.w .body .body-r {
  width: 992px;
  height: 610px;
}

.w .body .body-r ul {
  display: flex;
  flex-wrap: wrap;
}

.w .body .body-r ul li {
  position: relative;
  overflow: hidden;
  padding: 10px 20px;
  width: 25%;
}

布局点：

  • 左侧大图，右侧商品宫格。
  • 外层 .body 使用 Flex 分成左右两栏。
  • 右侧 ul 使用 Flex 换行。
  • 每个 li 宽度 25%，一行 4 个。
  • position: relative 给遮罩层定位。
  • overflow: hidden 隐藏初始状态下在盒子外的遮罩。

遮罩上滑：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.w .body .body-r ul li .mask {
  position: absolute;
  bottom: -83px;
  left: 0;
  width: 100%;
  height: 83px;
  background-color: #00BE9A;
  color: #fff;
  text-align: center;
  line-height: 83px;
  transition: all .3s;
}

.w .body .body-r ul li:hover .mask {
  transform: translateY(-83px);
}

11. 最新专题三列布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.news ul {
  display: flex;
  gap: 12px;
}

.news ul li {
  flex: 1;
  height: 355px;
  transition: all .3s;
}

.news ul li:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.news .con {
  height: 67px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
}

布局点：

  • 三张专题卡片用 flex: 1 等分。
  • 卡片之间用 gap 设置间距。
  • 底部数据栏用 Flex 两端对齐。

12. 底部布局

1
2
3
4
5
6
7
8
9
10
11
.footer .slogan ul {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 178px;
}

.footer .slogan ul li {
  display: flex;
  align-items: center;
}

slogan 区域：

  • 外层 ul 让多个卖点均匀分布。
  • 每个 li 内部再用 Flex，让图标和文字垂直居中。
  • 图标来自精灵图，通过 background-position 控制。

服务区：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.service {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
}

.service-left {
  display: flex;
  gap: 84px;
}

.service-right ul {
  display: flex;
  gap: 55px;
}

布局点：

  • 整体服务区左右分栏。
  • 左侧多个 dl 用 Flex 横向排布。
  • 右侧二维码也用 Flex 控制间距。

二十八、布局属性速查表

分类 属性/写法 常见取值 作用
显示模式 display block、inline-block、flex、grid 改变元素显示和布局方式
浮动 float left、right、none 让元素浮动排列
清除浮动 clear left、right、both 清除浮动影响
溢出 overflow hidden、auto、scroll、visible 控制溢出内容
Flex容器 justify-content center、space-between、space-evenly 主轴对齐
Flex容器 align-items center、stretch、flex-start、flex-end 单行交叉轴对齐
Flex容器 align-content center、space-between、space-evenly 多行交叉轴对齐
Flex容器 flex-direction row、column、row-reverse、column-reverse 主轴方向
Flex容器 flex-wrap nowrap、wrap、wrap-reverse 是否换行
Flex容器 gap 10px、16px 项目间距
Flex项目 flex 1、0 0 200px 伸缩比例和基础尺寸
定位 position relative、absolute、fixed、sticky 定位方式
定位偏移 top/right/bottom/left 0、10px、50% 定位元素偏移
层级 z-index 1、999 控制叠放次序
Grid容器 grid-template-columns repeat(3, 1fr) 定义列轨道
Grid容器 grid-template-rows repeat(3, 1fr) 定义行轨道
Grid容器 grid-auto-flow row、column 自动排列方向
Grid项目 grid-column 1 / span 2、1 / 3 跨列
Grid项目 grid-row 1 / span 2、1 / 3 跨行
Grid响应式 minmax() minmax(210px, 1fr) 设置轨道最小和最大值
Grid响应式 auto-fill 配合 repeat() 自动填充列
图片缩放 object-fit cover、contain、fill 控制图片填充方式
图片位置 object-position center、left、top 控制图片显示重点
多栏 column-count 4 设置列数
多栏 column-gap 20px 设置列间距
多栏 column-rule 1px dashed red 设置列分割线
多栏 break-inside avoid-column 避免盒子被列切开
滚动 scroll-behavior smooth 平滑滚动
鼠标 cursor pointer、text、grab 鼠标样式

二十九、布局选择建议

常见场景可以这样选：

场景 推荐布局
一行导航、按钮组、头部左右对齐 Flex
垂直居中、水平居中 Flex
卡片等分排列 Flex 或 Grid
明确几行几列的二维布局 Grid
响应式卡片列表 Grid + auto-fill + minmax()
复杂跨行跨列卡片 Grid
吸顶导航、固定表头 position: sticky
回到顶部、悬浮广告 position: fixed
角标、遮罩、轮播圆点 position: absolute + 父级 relative
高度不一致的瀑布流文本/卡片 多栏布局或 Flex 分列
旧页面兼容、多列排列 浮动