周报
Published by powerfulyang on Oct 14, 2022
2022-10-14
Concept
- 关于 vertical-align 的使用,
Line-relative values
不会改变基线,之后元素不会被影响。Parent-relative values
会改变基线,之后的元素默认会按照该元素对齐。- Parent-relative values
- baseline
- sub
- super
- text-top
- text-bottom
- middle
- <length>
- <percentage>
- Line-relative values
- top
- bottom
- Parent-relative values
- 关于 scrollIntoView 的使用。
vertical-align
inline element 可以使用 vertical-align 竖直对齐
1<iframe height="300" style="width: 100%;" scrolling="no" title="vertical-align-demo" src="https://codepen.io/powerfulyang/embed/abGrBmY?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
2 See the Pen <a href="https://codepen.io/powerfulyang/pen/abGrBmY">
3 vertical-align-demo</a> by powerfulyang (<a href="https://codepen.io/powerfulyang">@powerfulyang</a>)
4 on <a href="https://codepen.io">CodePen</a>.
5</iframe>
scrollIntoView
Syntax:
1scrollIntoView()
2scrollIntoView(alignToTop)
3scrollIntoView(scrollIntoViewOptions)
- alignToTop(Optional)
true
, Corresponds toscrollIntoViewOptions: {block: "start", inline: "nearest"}
. This is the default value.false
, Corresponds toscrollIntoViewOptions: {block: "end", inline: "nearest"}
.
- scrollIntoViewOptions(Optional)
behavior
(Optional)
Defines the transition animation. One ofauto
orsmooth
. Defaults toauto
.block
(Optional)
Defines vertical alignment. One ofstart
,center
,end
, ornearest
. Defaults tostart
.inline
(Optional)
Defines horizontal alignment. One ofstart
,center
,end
, ornearest
. Defaults tonearest
.
每日一题
Tree and List
1const root = {
2 pId: 0,
3 id: 1,
4 title: '1',
5 children: [
6 {
7 pId: 1,
8 id: 2,
9 title: '1-1',
10 children: [
11 {
12 pId: 2,
13 id: 3,
14 title: '1-1-1'
15 }
16 ]
17 },
18 {
19 pId: 1,
20 id: 4,
21 title: '1-2'
22 }
23 ]
24}
25
26const list = [
27 {
28 pId: 0,
29 id: 1,
30 title: '1'
31 },
32 {
33 pId: 1,
34 id: 2,
35 title: '1-1'
36 },
37 {
38 pId: 2,
39 id: 3,
40 title: '1-1-1'
41 },
42 {
43 pId: 1,
44 id: 4,
45 title: '1-2'
46 }
47]
48
49function treeToList(t) {
50 const list = [];
51 const helperQueue = [t];
52 while (helperQueue.length) {
53 const node = helperQueue.shift();
54 list.push(node);
55 if (node.children) {
56 helperQueue.push(...node.children);
57 delete node.children;
58 }
59 }
60 return list;
61}
62
63function listToTree(l) {
64 const helperMap = new Map();
65 let root;
66 for (const item of l) {
67 helperMap.set(item.id, item);
68 if (item.pId === 0) {
69 root = item;
70 }
71 }
72 for (const item of l) {
73 const parent = helperMap.get(item.pId);
74 if(parent) {
75 if(!parent.children) {
76 parent.children = []
77 }
78 parent.children.push(item)
79 }
80 }
81 return root;
82}