1
<!-- ❌ 不语义化 -->
2
<div class="header">网站标题</div>
3
<div class="nav">导航</div>
4
<div class="content">内容</div>
5

6
<!-- ✅ 语义化 -->
7
<header>网站标题</header>
8
<nav>导航</nav>
9
<main>
10
  <article>
11
    <h1>文章标题</h1>
12
    <section>章节一</section>
13
    <section>章节二</section>
14
  </article>
15
  <aside>侧边栏</aside>
16
</main>
17
<footer>页脚</footer>

1
<!-- 阻塞式 -->
2
<script src="a.js"></script>
3

4
<!-- 异步：下载不阻塞，执行时阻塞，顺序不保证 -->
5
<script async src="b.js"></script>
6

7
<!-- 延迟：下载不阻塞，DOM 解析完执行，按顺序 -->
8
<script defer src="c.js"></script>

1
// DOM 操作
2
document.getElementById('app')
3
document.querySelector('.class')
4
element.innerHTML = 'xxx'
5

6
// BOM 操作
7
window.location.href
8
window.history.back()
9
navigator.userAgent
10
screen.width

1
/* 标准盒模型（默认） */
2
.box1 {
3
  box-sizing: content-box;
4
  width: 200px;
5
  padding: 20px;
6
  border: 5px solid;
7
  /* 实际宽度 = 200 + 20*2 + 5*2 = 250px */
8
}
9

10
/* IE 盒模型 */
11
.box2 {
12
  box-sizing: border-box;
13
  width: 200px;
14
  padding: 20px;
15
  border: 5px solid;
16
  /* 实际宽度 = 200px，content = 200 - 40 - 10 = 150px */
17
}
18

19
/* 推荐全局设置 */
20
*, *::before, *::after {
21
  box-sizing: border-box;
22
}

1
/* 问题：子元素 margin-top 传递给父元素 */
2
.parent { background: #eee; }
3
.child { margin-top: 50px; background: #ccc; }
4

5
/* 解决方案 */
6
.parent { overflow: hidden; }        /* 触发 BFC */
7
.parent { border-top: 1px solid; }   /* 加边框 */
8
.parent { padding-top: 1px; }        /* 加内边距 */

1
/* 情况1：兄弟元素 */
2
.box1 { margin-bottom: 30px; }
3
.box2 { margin-top: 20px; }
4
/* 实际间距 = 30px，不是 50px */
5

6
/* 情况2：空块级元素自身 */
7
.empty {
8
  margin-top: 20px;
9
  margin-bottom: 30px;
10
  /* 实际高度 margin = 30px */
11
}

1
/* 1. 清除浮动（高度塌陷） */
2
.parent { overflow: hidden; } /* 触发 BFC */
3

4
/* 2. 避免 margin 合并 */
5
.box1 { margin-bottom: 20px; }
6
.divider { overflow: hidden; } /* BFC 隔离 */
7
.box2 { margin-top: 10px; }
8

9
/* 3. 两栏布局（左浮动右自适应） */
10
.left { float: left; width: 200px; }
11
.right { overflow: hidden; } /* BFC 不与浮动重叠 */

1
/* 计算示例 */
2
#nav .item a:hover        /* 100 + 10 + 1 + 10 = 121 */
3
.nav .item a.active       /* 10 + 10 + 1 + 10 = 31 */
4
div#main p.intro span     /* 1 + 100 + 1 + 10 + 1 = 113 */
5

6
/* !important 最高但慎用 */
7
.text { color: red !important; }

1
/* 基础选择器 */
2
* {}              /* 通配符 */
3
div {}            /* 标签 */
4
.class {}         /* 类 */
5
#id {}            /* ID */
6

7
/* 组合选择器 */
8
div p {}          /* 后代 */
9
div > p {}        /* 子代 */
10
div + p {}        /* 相邻兄弟 */
11
div ~ p {}        /* 通用兄弟 */
12

13
/* 属性选择器 */
14
[type="text"] {}  /* 精确匹配 */
15
[href^="http"] {} /* 开头匹配 */
16
[src$=".png"] {}  /* 结尾匹配 */
17
[class*="btn"] {} /* 包含匹配 */
18

19
/* 伪类 */
20
a:hover {}
21
li:first-child {}
22
li:nth-child(2n) {}
23
input:focus {}
24
:not(.active) {}
25

26
/* 伪元素 */
27
p::before {}
28
p::after {}
29
p::first-line {}
30
p::selection {}

1
.container {
2
  display: flex;
3

4
  /* 主轴方向 */
5
  flex-direction: row | row-reverse | column | column-reverse;
6

7
  /* 换行 */
8
  flex-wrap: nowrap | wrap | wrap-reverse;
9

10
  /* 主轴对齐 */
11
  justify-content: flex-start | center | flex-end |
12
                   space-between | space-around | space-evenly;
13

14
  /* 交叉轴对齐 */
15
  align-items: stretch | flex-start | center | flex-end | baseline;
16

17
  /* 多行对齐 */
18
  align-content: stretch | flex-start | center | ...;
19
}

1
.item {
2
  /* 放大比例，默认 0 */
3
  flex-grow: 1;
4

5
  /* 缩小比例，默认 1 */
6
  flex-shrink: 0;
7

8
  /* 基准大小 */
9
  flex-basis: 200px;
10

11
  /* 简写 */
12
  flex: 1;           /* flex: 1 1 0% */
13
  flex: auto;        /* flex: 1 1 auto */
14
  flex: none;        /* flex: 0 0 auto */
15

16
  /* 单独对齐 */
17
  align-self: center;
18

19
  /* 排序 */
20
  order: -1;
21
}

1
/* 水平垂直居中 */
2
.center {
3
  display: flex;
4
  justify-content: center;
5
  align-items: center;
6
}
7

8
/* 两栏布局 */
9
.layout {
10
  display: flex;
11
}
12
.sidebar { flex: 0 0 200px; }
13
.main { flex: 1; }
14

15
/* 三栏布局（圣杯） */
16
.layout { display: flex; }
17
.left { flex: 0 0 200px; }
18
.center { flex: 1; }
19
.right { flex: 0 0 150px; }

1
.container {
2
  display: grid;
3

4
  /* 定义列 */
5
  grid-template-columns: 200px 1fr 1fr;
6
  grid-template-columns: repeat(3, 1fr);
7
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
8

9
  /* 定义行 */
10
  grid-template-rows: 100px auto;
11

12
  /* 间距 */
13
  gap: 20px;           /* 行列间距 */
14
  row-gap: 10px;
15
  column-gap: 20px;
16

17
  /* 区域划分 */
18
  grid-template-areas:
19
    "header header header"
20
    "sidebar main main"
21
    "footer footer footer";
22
}
23

24
.item {
25
  /* 跨列 */
26
  grid-column: 1 / 3;      /* 从第1条线到第3条线 */
27
  grid-column: span 2;     /* 跨2列 */
28

29
  /* 跨行 */
30
  grid-row: 1 / 3;
31

32
  /* 区域 */
33
  grid-area: header;
34
}

1
/* 1. Flex（推荐） */
2
.parent {
3
  display: flex;
4
  justify-content: center;
5
  align-items: center;
6
}
7

8
/* 2. Grid */
9
.parent {
10
  display: grid;
11
  place-items: center;
12
}
13

14
/* 3. 定位 + transform */
15
.parent { position: relative; }
16
.child {
17
  position: absolute;
18
  top: 50%;
19
  left: 50%;
20
  transform: translate(-50%, -50%);
21
}
22

23
/* 4. 定位 + margin auto */
24
.parent { position: relative; }
25
.child {
26
  position: absolute;
27
  top: 0; right: 0; bottom: 0; left: 0;
28
  margin: auto;
29
  width: 200px;
30
  height: 100px;
31
}
32

33
/* 5. 行内元素 */
34
.parent {
35
  text-align: center;
36
  line-height: 100px; /* 等于容器高度 */
37
}
38

39
/* 6. table-cell */
40
.parent {
41
  display: table-cell;
42
  vertical-align: middle;
43
  text-align: center;
44
}

1
/* 移动优先 */
2
.container { width: 100%; }
3

4
@media (min-width: 768px) {
5
  .container { width: 750px; }
6
}
7

8
@media (min-width: 992px) {
9
  .container { width: 970px; }
10
}
11

12
@media (min-width: 1200px) {
13
  .container { width: 1170px; }
14
}
15

16
/* 常用断点 */
17
/* xs: <576px  sm: ≥576px  md: ≥768px  lg: ≥992px  xl: ≥1200px */

1
/* 百分比 */
2
.col { width: 50%; }
3

4
/* flex */
5
.row { display: flex; flex-wrap: wrap; }
6
.col { flex: 1; min-width: 200px; }
7

8
/* grid 自动适应 */
9
.grid {
10
  display: grid;
11
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
12
}

1
<!-- srcset -->
2
<img
3
  srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
4
  sizes="(max-width: 600px) 480px, 800px"
5
  src="medium.jpg"
6
  alt="responsive"
7
>
8

9
<!-- picture -->
10
<picture>
11
  <source media="(min-width: 800px)" srcset="large.jpg">
12
  <source media="(min-width: 400px)" srcset="medium.jpg">
13
  <img src="small.jpg" alt="responsive">
14
</picture>

1
/* rem 适配方案 */
2
html {
3
  font-size: 16px; /* 默认 */
4
}
5

6
@media (max-width: 768px) {
7
  html { font-size: 14px; }
8
}
9

10
.title { font-size: 1.5rem; } /* 24px 或 21px */
11

12
/* flexible.js 动态设置 */
13
document.documentElement.style.fontSize =
14
  document.documentElement.clientWidth / 10 + 'px';

1
/* 1. 圆角 */
2
border-radius: 10px;
3
border-radius: 50%; /* 圆形 */
4

5
/* 2. 阴影 */
6
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
7
text-shadow: 2px 2px 4px #ccc;
8

9
/* 3. 渐变 */
10
background: linear-gradient(to right, #ff6b6b, #4ecdc4);
11
background: radial-gradient(circle, #fff, #000);
12

13
/* 4. 变换 */
14
transform: translate(50px, 50px);
15
transform: rotate(45deg);
16
transform: scale(1.5);
17
transform: skew(10deg, 10deg);
18

19
/* 5. 过渡 */
20
transition: all 0.3s ease-in-out;
21
transition: width 0.3s, height 0.3s;
22

23
/* 6. 动画 */
24
@keyframes slide {
25
  from { transform: translateX(0); }
26
  to { transform: translateX(100px); }
27
}
28
animation: slide 2s infinite alternate;
29

30
/* 7. 弹性布局 */
31
display: flex;
32
display: grid;
33

34
/* 8. 滤镜 */
35
filter: blur(5px);
36
filter: grayscale(100%);
37

38
/* 9. 多列布局 */
39
columns: 3;
40
column-gap: 20px;
41

42
/* 10. 变量 */
43
:root { --primary: #3498db; }
44
.btn { color: var(--primary); }

1
/* transition：需要状态变化触发 */
2
.btn {
3
  background: blue;
4
  transition: background 0.3s ease;
5
}
6
.btn:hover {
7
  background: red;
8
}
9

10
/* animation：自动播放 */
11
.loading {
12
  animation: spin 1s linear infinite;
13
}
14

15
@keyframes spin {
16
  0% { transform: rotate(0deg); }
17
  100% { transform: rotate(360deg); }
18
}
19

20
/* animation 属性 */
21
animation: name duration timing-function delay iteration-count direction fill-mode;
22
animation: slide 2s ease-in-out 0.5s infinite alternate forwards;

1
// ❌ 触发多次回流
2
element.style.width = '100px';  // 回流
3
element.style.height = '100px'; // 回流
4
element.style.margin = '10px';  // 回流
5

6
// ✅ 批量修改
7
element.style.cssText = 'width: 100px; height: 100px; margin: 10px;';
8
// 或
9
element.className = 'new-class';
10

11
// ❌ 读取布局信息会强制回流
12
const width = element.offsetWidth; // 可能触发回流
13
element.style.width = width + 10 + 'px';
14

15
// ✅ 使用 DocumentFragment
16
const fragment = document.createDocumentFragment();
17
for (let i = 0; i < 100; i++) {
18
  const div = document.createElement('div');
19
  fragment.appendChild(div);
20
}
21
document.body.appendChild(fragment); // 一次回流
22

23
// ✅ 离线修改
24
element.style.display = 'none';
25
// ... 多次修改
26
element.style.display = 'block';
27

28
// ✅ 使用 transform 代替 top/left
29
// 触发合成层，不回流
30
element.style.transform = 'translateX(100px)';