0-2 CSS 必备:盒模型与 Flex 布局
后端同学转前端,最容易卡住的不是 JS,而是 CSS 布局——「为什么这两个框不并排?」「为什么它没居中?」。本章只讲你 90% 时间会用到的核心:盒模型 和 Flex 布局。其它细枝末节用到再查。
心态:CSS 不用全背。掌握盒模型 + Flex,够你应付绝大多数移动端页面。
1. 一切都是「盒子」(盒模型)
页面上每个元素都是一个矩形盒子,从内到外有四层:
┌─────────────────────────────┐ ← margin(外边距:盒子和别人的距离)
│ ┌─────────────────────┐ │
│ │ border(边框) │ │
│ │ ┌───────────────┐ │ │
│ │ │ padding(内边距)│ │ │
│ │ │ ┌─────────┐ │ │ │
│ │ │ │ content │ │ │ │ ← content(内容:文字/图片)
│ │ │ └─────────┘ │ │ │
│ │ └───────────────┘ │ │
│ └─────────────────────┘ │
└─────────────────────────────┘- content:内容本身。
- padding:内容到边框的距离(盒子「内部留白」)。
- border:边框线。
- margin:盒子外部、和其它盒子的距离。
一个超重要的坑:box-sizing
默认情况下,你设 width: 100px,加了 padding: 20px 后,实际宽度变成 140px(内容100 + 左右padding各20)。这反直觉,经常把布局撑乱。
解决办法(几乎所有项目都会写):
* {
box-sizing: border-box; /* 让 width 包含 padding 和 border,所见即所得 */
}加了这行,width: 100px 就是盒子总宽 100px,padding 往里挤,不会撑大。记住这个,能省你无数调试时间。
2. 怎么给元素加样式(三种选择器)
<p id="title" class="big">你好</p>p { color: gray; } /* 标签选择器:所有 <p> */
.big { font-size: 24px; } /* 类选择器:class="big" 的元素(最常用) */
#title { color: red; } /* id 选择器:id="title" 的那一个 */实战中 90% 用 class 选择器(
.xxx)。Vue 项目里几乎都是 class。
3. Flex 布局——排版神器(必须掌握)
老问题:两个 <div> 默认是上下堆叠的(块级元素各占一行)。想让它们并排、或居中,以前要用各种 hack。现在用 Flex 一招搞定。
口诀:给「父容器」加 display: flex,它的「直接子元素」就会横向排成一行。
.container {
display: flex; /* 开启 flex,子元素变横向排列 */
justify-content: center; /* 主轴(横向)对齐方式 */
align-items: center; /* 交叉轴(纵向)对齐方式 */
gap: 10px; /* 子元素之间的间距 */
}justify-content(横向怎么排)常用值
| 值 | 效果 |
|---|---|
flex-start | 全部靠左(默认) |
center | 居中 |
flex-end | 靠右 |
space-between | 两端顶格,中间均分(导航栏常用) |
space-around | 每个元素两侧均等间距 |
align-items(纵向怎么对齐)常用值
| 值 | 效果 |
|---|---|
stretch | 拉伸填满(默认) |
center | 垂直居中(最常用) |
flex-start / flex-end | 顶部 / 底部对齐 |
「水平垂直居中」——前端经典面试题,Flex 三行搞定
.box {
display: flex;
justify-content: center; /* 横向居中 */
align-items: center; /* 纵向居中 */
}主轴方向:flex-direction
flex-direction: row; /* 默认:横向(从左到右) */
flex-direction: column; /* 改成纵向(从上到下),移动端列表常用 */注意:改成
column后,justify-content和align-items的方向会对调(主轴变纵向了)。
4. demo:Flex 布局实验室
打开 demo/0-2-flex-playground.html。这个 demo 做了一个交互式 Flex 实验台:
- 上面一排按钮,点击可以切换
justify-content/align-items/flex-direction的值。 - 下面的方块会实时变化排列方式,当前生效的 CSS 也会显示出来。
这是理解 Flex 最快的方式:改参数,立刻看排列怎么变。强烈建议每个按钮都点一遍。
另外 demo/0-2-boxmodel.html 演示了 box-sizing 那个坑:两个设了相同 width 的盒子,一个加了 border-box 一个没加,你能直观看到宽度差异。
动手练习
- 打开 Flex 实验室,把
justify-content切到space-between,观察方块如何分布(这就是顶部导航栏的排法)。 - 把
flex-direction切到column,再切换align-items,体会方向对调。 - 打开 boxmodel demo,理解为什么不加
border-box的盒子更宽。
小结
- 每个元素都是盒子:content / padding / border / margin。
- 务必全局加
* { box-sizing: border-box; },避免宽度被 padding 撑大。 - 布局用 Flex:
display: flex+justify-content(横) +align-items(纵)。 - 水平垂直居中 = flex + 两个 center。
➡️ 下一章:0-3 现代 JavaScript(ES6+)