CSS

coderljw 2024-10-13

大约 3 分钟

# 1. 网页字体设计 (opens new window)

@font-face {
  font-family: Emoji;
  src: local('Apple Color Emojiji'), local('Segoe UI Emoji'), local(
      'Segoe UI Symbol'
    ), local('Noto Color Emoji');
  unicode-range: U+1F000-1F644, U+203C-3299;
}

body {
  font-family: system-ui, —apple-system, Segoe UI, Rototo, Emoji, Helvetica, Arial,
    sans-serif;
}

/* 衬线字体 */
.font-serif {
  font-family: Georgia, Cambria, 'Times New Roman', Times, serif;
}

/* 等宽字体 */
.font-mono {
  font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 2. Flex

可用于 Flex 项目的属性有 align-self 和 margin: auto。
align-content 属性必须要在 flex-wrap 属性值为 wrap 或 wrap-reverse 条件下才能正常工作；但 align-items 属性则不需要。
默认情况之下，Flex 项目（即设置了 flex:1 ）在收缩的时候，其宽度也不会小于其最小内容尺寸（min-content）或固定尺寸元素。如果要改变这一点，需要在 Flex 项目上显示设置最小宽度 min-width (或 min-inline-size)，或最小高度 min-height（或 min-block-size）的值，一般将其设置为 0。需要在使用 overflow-wrap 为 break-word 的地方重置 min-width 值，并且强制它变成 0。

<main>
  <section class="ma">
    <div>margin-left: auto</div>
  </section>
  <section class="fw">
    <div>align-content: center</div>
  </section>
  <section class="mw">
    <div>minwidthminwidth</div>
    <div>minwidthminwidthminwidthminwidth</div>
    <div>minwidthminwidthminwidthminwidthminwidthminwidth</div>
  </section>
</main>

1
2
3
4
5
6
7
8
9
10
11
12
13

main {
  display: grid;
  height: 400px;
  background: #000;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-template-areas:
    'ma fw'
    'mw mw';
  gap: 1rem;
}

.ma {
  grid-area: ma;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  background: skyblue;
  padding: 1rem;
}

.ma div {
  margin-left: auto;
}

.fw {
  grid-area: fw;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: center;
  align-content: center; */
  place-content: center;
  background: pink;
}

.mw {
  grid-area: mw;
  display: flex;
}

.mw div {
  flex: 1;
  min-width: 0;
  padding: 1rem;
  overflow-wrap: break-word;
}

.mw div:nth-child(1) {
  background: bisque;
}

.mw div:nth-child(2) {
  background: aqua;
}

.mw div:nth-child(3) {
  background: coral;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

# 3. Grid

与 Flex 一样，重置最小尺寸为 0，实现小于 min-content 时等宽/高。

<main>
  <section>minwidthminwidth</section>
  <section>minwidthminwidthminwidthminwidth</section>
  <section>minwidthminwidthminwidthminwidthminwidthminwidth</section>
</main>

1
2
3
4
5

main {
  display: grid;
  height: 400px;
  background: #000;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

section {
  padding: 1rem;
  overflow-wrap: break-word;
}

section:nth-child(1) {
  background: bisque;
}

section:nth-child(2) {
  background: aqua;
}

section:nth-child(3) {
  background: coral;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

不定高度的过渡动画（初始无高度，有高度不行）。

<main>
  <section>
    <button>Hover</button>
    <article>
      <div>
        <p>
          李淳罡走到大雪坪崖畔，身后是一如他与绿袍女子场景的撑伞男女。她被一剑洞穿心胸时，曾惨白笑言：“天不生你李淳罡，很无趣呢。”李淳罡大声道：“剑来！”徽山所有剑士的数百佩剑一齐出鞘，向大雪坪飞来。龙虎山道士各式千柄桃木剑一概出鞘，浩浩荡荡飞向牯牛大岗。两拨飞剑。遮天蔽曰。这一曰，剑神李淳罡再入陆地剑仙境界。
        </p>
      </div>
    </article>
  </section>
</main>

1
2
3
4
5
6
7
8
9
10
11
12

main {
  display: grid;
  height: 400px;
  justify-items: center;
}

section {
  width: 50%;
  margin-top: 10%;
}

button:hover ~ article {
  grid-template-rows: 1fr;
}

button {
  display: block;
  margin: 0 auto;
}

article {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.5s;
  overflow: hidden;
}

article:hover {
  grid-template-rows: 1fr;
}

article div {
  min-height: 0;
  text-indent: 2em;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

博客文章展示布局 拖动窗口瞅瞅。

<main>
  <div></div>
  <section></section>
  <div></div>
</main>

1
2
3
4
5

main {
  display: grid;
  min-height: 400px;
  background: #000;
  grid-template-columns: minmax(1rem, 1fr) minmax(auto, 70ch) minmax(1rem, 1fr);
}

section {
  background: aqua;
}

1
2
3
4
5
6
7
8
9
10

要是将 repeat() 函数和 minmax(min,max)、1fr 和 auto-fill（或 auto-fit）结合起来，可以很容易帮我们实现像下图这样的响应式布局效果。这种布局技术也被称为 RAM（Repeat, Auto, Minmax）布局，一种无需依赖任何 CSS 媒体查询特性的响应式布局 拖动窗口瞅瞅。

<main>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</main>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

main {
  display: grid;
  min-height: 400px;
  background: #000;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  padding: 20px;
  gap: 20px;
}

section {
  height: 180px;
}

section:nth-child(odd) {
  background: skyblue;
}

section:nth-child(even) {
  background: pink;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Number