HTML 结构
Hello World
常用元素
文本与标题
Heading 1
...Heading 6
Paragraph text
Bold Italic链接与图片
列表
- Item
- First
表单
Input 类型
Select 与 Textarea
语义化 HTML
| <header> | 介绍内容或导航容器 |
| <nav> | 导航链接 |
| <main> | 页面主要内容（每页唯一） |
| <section> | 内容的主题分组 |
| <article> | 独立内容 |
| <aside> | 侧边栏或辅助内容 |
| <footer> | 节或页面的页脚 |
| <figure> | 带标题的图片/图表 |
| <figcaption> |
CSS 选择器
基础选择器
| element | p { } — 所有 元素 |
| .class | .card { } — class 选择器 |
| #id | #main { } — id 选择器 |
| * | 通用选择器（所有元素） |
组合器
| A B | 后代（B 在 A 内部） |
| A > B | 仅直接子元素 |
| A + B | 相邻兄弟（B 紧跟 A 后） |
| A ~ B | 通用兄弟（A 之后的 B） |
伪类
| :hover | 鼠标悬停 |
| :focus | 元素获得焦点 |
| :first-child | 父元素的第一个子元素 |
| :nth-child(n) | 第 n 个子元素（2n = 偶数，odd = 奇数） |
盒模型
.box {
margin: 10px; /* outside */
border: 1px solid #333; /* edge */
padding: 15px; /* inside */
width: 200px;
box-sizing: border-box; /* include pad+border */
}
简写
| margin: 10px | 四边相同 |
| margin: 10px 20px | 上下 | 左右 |
| margin: 10px 20px 15px | 上 | 左右 | 下 |
| margin: 10px 20px 15px 5px | 上 | 右 | 下 | 左 |
Flexbox
容器
.flex-container {
display: flex;
flex-direction: row; /* row | column */
justify-content: center; /* main axis */
align-items: center; /* cross axis */
gap: 10px;
flex-wrap: wrap;
}
子项属性
| flex: 1 | 拉伸填满可用空间 |
| flex-grow: 2 | 相对兄弟元素的增长比例 |
| flex-shrink: 0 | 不收缩低于基础尺寸 |
| flex-basis: 200px | 增长/收缩前的初始尺寸 |
| align-self: flex-end | 覆盖容器对齐 |
| order: -1 | 视觉顺序（默认 0） |
Grid
容器
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
gap: 10px;
}
子项定位
.item {
grid-column: 1 / 3; /* span col 1-2 */
grid-row: 1 / 2;
}
/* shorthand: repeat, minmax */
grid-template-columns: repeat(3, 1fr);
grid-template-columns:
repeat(auto-fit, minmax(200px, 1fr));
定位
| static | 默认流（无偏移属性） |
| relative | 相对正常位置偏移 |
| absolute | 相对最近已定位祖先偏移 |
| fixed | 相对视口偏移（滚动不移动） |
| sticky | 滚动前相对定位，超过阈值后固定 |
示例
.parent { position: relative; }
.child {
position: absolute;
top: 0; right: 0; /* top-right corner */
}
媒体查询
/* Mobile-first: base styles for small screens */
.container { padding: 10px; }
@media (min-width: 768px) {
.container { max-width: 720px; }
}
@media (min-width: 1024px) {
.container { max-width: 960px; }
}
常用断点
| 480px | 小手机 |
| 768px | 平板 |
| 1024px | 小桌面 / 横屏平板 |
| 1280px | 桌面 |