第8章 · 布局·定位·响应式

8.1display：block / inline / inline-block

块级独占一行、行内随文字流、行内块「能设宽高又不下换行」——三者的分工。

block 1

block 2

行内文字 display:inline（宽度无效）行内文字 inline-block
可设宽高行内文字

/* block：独占一行，能设宽高
   （div p h1 ul ...默认） */
.blk { display: block; }

/* inline：随文字流排，宽高无效
   （span a strong ...默认） */
.i1 { display: inline; }

/* inline-block：不换行 + 能设宽高
   （导航项、小徽章的常用选择） */
.i2 {
  display: inline-block;
  width: 120px; height: 40px;
}

行内元素的 width/height/上下 margin 统统无效——想让 span 有宽高，先改 display。

8.2position 四兄弟relative / absolute / fixed / sticky

relative 相对自己挪窝、absolute 相对定位父级、fixed 相对视口、sticky 滚到顶就粘住。

容器（position:relative 的参照系）

relative：从原位向右下挪 30/14px，原位置仍占着

absolute：钉在容器右上角，不占文档流

sticky 表头（往下滚试试）

滚动内容 1

滚动内容 2

滚动内容 3

滚动内容 4

滚动内容 5

fixed · 右下角（滚动页面它不动）

.pd-rel { position: relative; left: 30px; top: 14px; }

/* absolute 相对「最近的定位祖先」——
   所以外层要写 position:relative 当锚 */
.pd-abs { position: absolute; right: 12px; top: 40px; }

/* fixed 相对浏览器窗口，滚动也不动
   （回顶按钮、悬浮客服） */
.pd-fixed { position: fixed; right: 18px; bottom: 18px; }

/* sticky：滚动容器内粘在 top 位置
   （表格吸顶表头、侧栏目录） */
.pd-sticky { position: sticky; top: 0; }

absolute 的孩子找不到「定位祖先」就会一路锚到 整个页面——「弹窗飞到奇怪位置」八成是忘了给父级加 relative。

8.3Flex 主轴与交叉轴

display:flex 之后，子元素沿主轴排成一队；justify-content 管主轴，align-items 管交叉轴。

1

2

3

justify-content: space-between

1

2

3

align-items: flex-end

column · 纵向排列

纵向第二块

/* 主轴分布：两端对齐（导航栏标配） */
.fx-jc {
  display: flex;
  justify-content: space-between;
}

/* 交叉轴对齐：底边对齐 */
.fx-ai { display: flex; align-items: flex-end; }

/* 换轴：主轴变成纵向 */
.fx-c { display: flex; flex-direction: column; }

/* 记忆：justify 管主轴，
   align 管交叉轴（方向换了跟着换） */

flex 一开，子元素变成「弹性项」：gap 管间距、flex:1 管分配、margin:auto 可单独吃掉剩余空间。

8.4flex-wrap 与弹性分配

默认 flex 不换行会「挤扁」；加 wrap 允许换行，flex:0 0 30% 让每项占三成、自动流到下一行。

30%

拖窄窗口：每行三个装不下 → 自动换行，卡片宽度不变形。

.fx-wrap {
  display: flex;
  flex-wrap: wrap;    /* 允许换行 */
  gap: 8px;           /* 行间距列间距都管 */
}

.fx-wrap .it {
  flex: 0 0 30%;
  /* 0 不放大，0 不缩小，
     基准宽 30% */
}

/* 三属性记法：grow shrink basis */

flex:1 = 1 1 0（平分剩余空间）；flex:0 0 30%（固定三成）。瀑布卡片流就是 wrap + 百分比 basis。

8.5实战：Flex 三栏布局（侧栏-主栏-侧栏）

两条侧栏固定宽，中间 flex:1 吃掉全部剩余空间——经典页面骨架五行写完。

左栏
64px

主栏 flex:1（自动变宽）

右栏
64px

.tri-col {
  display: flex;
  gap: 10px;
}

/* 两条侧栏：固定宽，不缩不放 */
.side { flex: 0 0 64px; }

/* 主栏：吃掉剩余全部空间 */
.mid { flex: 1; }

/* 等价老写法 float + calc 已淘汰；
   手机端还可以改 flex-direction
   让三栏变上下堆叠 */

把 min-width:0 补给主栏，可修复「flex 子项里长文本撑爆布局」的经典 bug。

8.6Grid：二维网格，行列一起管

Flex 管一维（一行/一列），Grid 管二维（同时管行列）——相册、仪表盘首选。

跨两列：grid-column: span 2

3

4

5

6

.gd {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 3 等列，1fr = 1 份剩余空间 */
  gap: 8px;
}

/* 让某项横跨两列 */
.wide { grid-column: span 2; }

/* repeat(3,1fr) 简写 =
   1fr 1fr 1fr */

选型口诀：一行或一列用 Flex，行+列都讲究用 Grid。两者可以嵌套使用，不冲突。

8.7媒体查询 @media拖窄窗口亲自验证

条件 CSS：窗口 ≤ 700px 时，下方徽标会变红底白字并附一句话——同一份 HTML，两套表现。

当前窗口 > 700px · 浅色徽标

把浏览器窗口拖窄到 700px 以下（或开手机模拟器），徽标样式自动切换。

/* 默认样式（桌面优先） */
.mq-demo .tag {
  background: #FBF0DA;
  color: #8A5A08;
}

/* 视口 ≤ 700px 时覆盖 */
@media (max-width: 700px) {
  .mq-demo .tag {
    background: #B04A2C;
    color: #fff;
  }
}

/* 断点常用值：
   768 平板 / 992 小桌面 /
   1200 大屏 */

响应式三件套：媒体查询 + 相对单位（第4章）+ flex/grid 弹性布局，缺一不可。

8.8clamp()：不写媒体查询的自适应字号拖窄窗口看字号变化

clamp(最小值, 首选值, 最大值)——字号在两档之间随视口连续滑动。

我的字号 = clamp(14px, 4.5vw, 30px) 窗口多宽，4.5vw 就多大，但被夹在 14px ~ 30px 之间

.clamp-d {
  font-size: clamp(14px, 4.5vw, 30px);
}

/* 三个参数：
   最小 14px ─ 中间 4.5vw ─ 最大 30px
   视口宽 → vw 大 → 实际取 30px
   视口窄 → vw 小 → 实际取 14px */

/* 适合：hero 标题、banner 大字。
   正文别用，太小屏会难读 */

clamp = max() 和 min() 的合体。一行替代一整段媒体查询——「流式排版」的现代答案。

布局 · 定位 · 响应式