3. CSS3核心基础
说实话，CSS3这块内容，是每个前端开发者的基本功。我见过太多人，写样式全凭感觉，出了问题就靠瞎试。今天咱们就把这几个核心概念彻底捋清楚。
3.1 选择器：精准命中目标元素
选择器说白了就是「找元素」的工具。你写CSS，第一步就是告诉浏览器：我要给谁加样式。
基础选择器
- 元素选择器：
div { }—— 选所有div - 类选择器：
.box { }—— 选class为box的元素 - ID选择器：
#header { }—— 选id为header的元素（注意，一个页面只能有一个） - 通配符：
* { }—— 选所有元素，慎用
组合选择器
工作中用得最多的其实是组合选择器。我举个例子：
/* 后代选择器：div里面所有的p */
div p { color: red; }
/* 子代选择器：div的直接子元素p */
div > p { color: blue; }
/* 相邻兄弟：紧跟在h2后面的第一个p */
h2 + p { font-weight: bold; }
/* 通用兄弟：h2后面所有的p */
h2 ~ p { font-style: italic; }你想想看，这些组合方式能帮你写出非常精准的样式，而且不用额外加class。
伪类与伪元素
伪类描述的是元素的「状态」，伪元素则是元素的「某个部分」。我刚开始学的时候老搞混，后来记住一句话：伪类用一个冒号，伪元素用两个冒号。
/* 伪类：状态相关 */
a:hover { color: orange; }
input:focus { border-color: blue; }
li:first-child { font-weight: bold; }
/* 伪元素：内容相关 */
p::first-line { font-size: 1.2em; }
div::before { content: "★"; }::before和::after必须设置content属性，哪怕为空字符串，否则不显示。这个我至少debug过三次才记住。
3.2 盒模型：页面布局的基石
每个HTML元素都是一个盒子。这个盒子由四部分组成：内容区、内边距、边框、外边距。说白了就是「从里到外」一层层包着。
/* 标准盒模型 */
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
/* 实际占宽：200 + 20*2 + 5*2 = 250px */
}
/* 怪异盒模型（IE盒模型） */
.box-border {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid black;
/* 实际占宽：200px（内容区被压缩到150px） */
}嗯，这里要注意。我建议所有项目都加上一句：
*, *::before, *::after {
box-sizing: border-box;
}为什么？因为border-box算尺寸更符合直觉。你设了宽度200px，它就是200px，不会因为加了padding和border就撑大。这个习惯我从2015年保持到现在，再也没为盒模型算错过尺寸。
3.3 浮动与定位：传统布局的两把刀
浮动（float）
浮动最初设计是为了实现文字环绕图片的效果。后来被大家拿来布局，其实有点「大材小用」。但老项目里到处都是，你得会看会改。
.left { float: left; width: 200px; }
.right { float: right; width: 200px; }
.clearfix::after {
content: "";
display: table;
clear: both;
}定位（position）
定位有五种值，但工作中常用的就三个：
- relative：相对自己原来的位置偏移，不脱离文档流
- absolute：脱离文档流，相对于最近的有定位的祖先元素
- fixed：脱离文档流，相对于视口固定
.parent { position: relative; }
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 经典居中写法 */
}这个居中写法我用了好多年。你想想看，父容器relative，子元素absolute，然后top/left各50%，再用transform拉回一半。完美居中，而且不用知道宽高。
3.4 Flex弹性布局：一维布局的王者
Flex布局出来之后，我基本告别了float布局。它解决了一个核心痛点：在容器内如何分配空间给子元素。
.flex-container {
display: flex;
justify-content: center; /* 主轴对齐 */
align-items: center; /* 交叉轴对齐 */
flex-wrap: wrap; /* 换行 */
gap: 10px; /* 间距 */
}
.flex-item {
flex: 1; /* 等分剩余空间 */
/* 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
}我个人习惯把flex布局分成两步走：先定主轴方向（默认水平），再定对齐方式。justify-content管主轴，align-items管交叉轴。记住这个，90%的场景都能搞定。
min-height: 100vh做全屏布局，结果子元素内容太多时溢出了。后来加了overflow: auto才解决。flex容器默认不会收缩到比内容小，这点要留意。
3.5 Grid网格布局：二维布局的终极方案
如果说Flex是一维的，那Grid就是二维的。它同时控制行和列，做复杂页面布局简直不要太爽。
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 三列，中间占两份 */
grid-template-rows: auto 200px auto; /* 三行 */
gap: 15px;
}
.grid-item {
/* 可以指定位置 */
grid-column: 1 / 3; /* 从第1列线到第3列线 */
grid-row: 1 / 2; /* 从第1行线到第2行线 */
}你想想看，以前用float做这种三列布局，得写多少清除浮动的代码？现在Grid一行搞定。而且Grid支持命名区域，可读性更好：
.layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 80px 1fr 60px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }这个写法我特别喜欢。你看一眼grid-template-areas，整个页面结构就清清楚楚。比看一堆float和position代码舒服多了。
3.6 知识体系总览
下面这张图是我自己整理的CSS3布局知识体系，你可以对照着查漏补缺：
从这张图你能看出来，CSS3的布局能力是层层递进的。先学会选择器精准命中元素，再理解盒模型怎么算尺寸，然后掌握浮动和定位做传统布局，最后用Flex和Grid搞定现代复杂页面。
好了，这一章的内容就到这里。CSS3的核心基础，说白了就是这几个概念来回用。你只要把选择器、盒模型、浮动定位、Flex、Grid这五块吃透，市面上90%的页面布局你都能搞定。