01布局与对齐

布局回答一个问题：内容放在页面的什么位置。 本章先摸清浏览器「不写任何布局代码时」的默认排版规则（文档流）， 再总览改变布局的三大门派，并练熟前端面试第一题——居中。

约 14 分钟 5 个动手实验 布局开篇

一、文档流：不写布局时的默认规则

不写任何布局 CSS，浏览器也有一套自带的排版规则，叫文档流（normal flow，普通流）。 它只有两条朴素规则：

  • 块级元素（div、p、h1…）：从上到下堆，像一摞积木，每块独占一行，默认宽度撑满父级。
  • 行内元素（span、a、strong…)：从左到右排，像一行文字，排不下再换行，宽高由内容决定。
块级竖着堆、行内横着排：改动行内那块 .inl 的 width，看它依然纹丝不动（行内不吃宽高）
注意行内那排色块：它们上下方向的 margin、宽高都不生效（padding 上下能撑开背景但不占位）—— 这是行内元素的天然限制，后面会看到用 inline-block 或 flex 解决。

之后学的浮动、定位、Flex、Grid，本质上都是在打破或接管这套默认规则： 浮动让元素「飘」起来给文字让路，定位把元素「钉」在坐标上，Flex/Grid 则直接接管整条排版流水线。

二、改变布局的三大手段（本章是总纲）

CSS 里能把元素「挪出默认文档流」或「重新组织排列」的手段，主流就三类：

三大布局手段：极速建立全局观
手段核心属性一句直觉典型用途现状
浮动float / clear让元素「飘」起来，文字环绕它图文混排老项目布局 hack，新项目只做文字环绕
定位position / top 等 / z-index把元素「钉」在某个参照物的坐标上弹窗、角标、吸顶、返回顶部精确控制的必备工具
弹性 / 网格display: flex / display: gridflex 像「晾衣杆」排一维，grid 像「棋盘」排二维导航、卡片列表、整页骨架现代布局的绝对主力
学习顺序 = 演变顺序：先懂文档流的「自然规律」（本节）， 再看《浮动》《定位》这些「打破规则」的手段，最后用《Flex》《Grid》优雅地解决问题。 溢出处理（后面的第 04 课）是所有布局都会遇到的收尾问题。

三、水平居中三法

「居中」是布局第一课。水平居中前先问一句：要居中的是「盒子」还是「文字 / 行内内容」？ 对象不同，方法完全不同。

  • 法一：定宽的块级盒子 → 自己用 margin: 0 auto（左右 auto 平分剩余空间）。
  • 法二：行内内容（文字、span、图片）→ 给父级设 text-align: center。
  • 法三：不定宽又想设宽高的盒子 → 先变成 inline-block，再让父级 text-align: center。
水平居中三法：对象不同、方法不同
方法管谁核心代码前提
margin: 0 auto定宽块级盒子width: 220px; margin: 0 auto;必须定宽、必须是块级
text-align: center行内内容父级 text-align: center居中对象是行内级内容
inline-block + text-align能设宽高的「行内」子 display: inline-block + 父 text-align: center想让盒子跟文字一样排队
三种水平居中对比：把 .ly-h-block 的 width 改成 100%，法一立刻失守（没有剩余空间可分）
经典坑：margin: 0 auto 居中失效，九成是因为盒子没有定宽 （块级默认宽度 100%，没有「剩余空间」可分），或者盒子被设成了 inline/inline-block （行内级元素不吃 margin auto 居中）。

四、垂直居中两法：line-height 与 vertical-align

垂直方向没有 margin: auto 这种万金油，得看场景选工具。 最常用的两招：单行文本用 line-height， 行内内容与图片对齐用 vertical-align。

法一：单行文本——行高等于盒子高度

绿色条垂直居中 vs 红色虚线条贴顶：把 .ly-v-line 的 line-height 改成 40px，它立刻变回最上面

法二：vertical-align——只对行内内容和表格单元格生效

vertical-align 管的是同一行内行内元素之间（或图片与文字之间）的垂直对齐关系。 下面的「图片」用渐变色块代替：

vertical-align 常用取值行为分析
取值基准一句话
baseline（默认）文字的「脚」（基线）图片底部与文字基线对齐，底下常漏一条缝
middle行内元素中线图片中线与文字中线对齐，图文混排最常用
top / bottom行框顶边 / 底边受同一行最高点影响，适合整行对齐
数值 / 百分比在 baseline 基础上偏移精细微调时用（如 vertical-align: -3px）
图片与文字的三种垂直对齐：把第二行的 vertical-align 改成 top，图片立刻顶到行顶
vertical-align 是新手最常踩的坑之一：它只对行内元素和表格单元格生效， 对普通块级 div 完全无效。「我想让一个 div 在另一个 div 里垂直居中」用它是不行的—— 那是下一节 translate 或后面第 05 课 Flex 的活儿。

五、translate(-50%,-50%)：万能居中

还有一招「不讲道理但极其好用」的万能居中：先把盒子的左上角放到父级中心 （left: 50%; top: 50%），再用 transform: translate(-50%, -50%) 把盒子往回退自身宽高的一半——正好落在正中心。 因为 -50% 参照的是元素自身尺寸，所以盒子多大都适用，不需要知道尺寸。

左边只有 left/top（角在中心偏右下），右边加 translate 真正居中：给 .ly-t-box 加 padding: 30px，它依然居中——这就是「与尺寸无关」
translate 里的 -50% 参照的是元素自身宽高， 与父级尺寸无关——所以叫「万能居中」。transform 的完整用法（旋转、缩放、动画） 会在后面的《CSS3 进阶》章节（2D 与 3D 转换一课）展开，这里先记住这一招即可。

六、对齐相关属性速查表

本章出现的对齐工具汇总成一张表，用之前先想清楚「对齐的是谁」：

对齐工具总表：先分清对象再用
属性管什么常用值一句话记忆
text-align行内内容的水平对齐（设在父级）left / center / right / justify管「文字」，不管块级盒子
vertical-align行内元素 / 表格单元格的垂直对齐baseline / middle / top / bottom只对行内和 td 生效
margin: 0 auto定宽块级盒子的水平居中auto左右 auto 平分剩余空间
line-height单行文本的垂直居中数值 = 容器高度只适合「一行」
transform: translate(-50%,-50%)任意元素的精确居中配合 left/top: 50%万能居中，不问尺寸
place-itemsGrid 中一步完成水平 + 垂直居中centerFlex 版 = justify-content + align-items
选型口诀：文字用 text，盒子用 margin；一行看 line-height，行内看 vertical； 不问尺寸就 translate；进了 Flex/Grid 再学新招。

七、本章小结

  • 文档流是默认规则：块级从上到下堆，行内从左到右排；行内元素不吃宽高和上下 margin。
  • 改变布局的三大手段：浮动（文字环绕）、定位（精确坐标）、Flex/Grid（现代布局主力）。
  • 水平居中三法：定宽块级 margin: 0 auto；行内内容 text-align: center；inline-block + 父级 text-align。
  • 垂直居中两法：单行文本 line-height = 高度；行内/图片对齐 vertical-align（对块级无效）。
  • left/top: 50% + translate(-50%,-50%) 是与尺寸无关的万能居中。
  • 居中之前先问：对谁居中？它是行内、块级还是定位元素？
动手练习：做一个 320px 宽的「个人名片」——外层用 margin: 0 auto 水平居中； 名片里放一条 48px 高的渐变色横幅，用 line-height 让标题垂直居中； 再放一张渐变色块当头像，用 vertical-align: middle 让旁边的大名与头像对齐。 把本节三种居中全部用上，再故意删掉一行 CSS 看看谁先「翻车」。