周报
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 竖直对齐
scrollIntoView
Syntax:
1 2 3
scrollIntoView() scrollIntoView(alignToTop) scrollIntoView(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
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 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82
const root = { pId: 0, id: 1, title: '1', children: [ { pId: 1, id: 2, title: '1-1', children: [ { pId: 2, id: 3, title: '1-1-1' } ] }, { pId: 1, id: 4, title: '1-2' } ] } const list = [ { pId: 0, id: 1, title: '1' }, { pId: 1, id: 2, title: '1-1' }, { pId: 2, id: 3, title: '1-1-1' }, { pId: 1, id: 4, title: '1-2' } ] function treeToList(t) { const list = []; const helperQueue = [t]; while (helperQueue.length) { const node = helperQueue.shift(); list.push(node); if (node.children) { helperQueue.push(...node.children); delete node.children; } } return list; } function listToTree(l) { const helperMap = new Map(); let root; for (const item of l) { helperMap.set(item.id, item); if (item.pId === 0) { root = item; } } for (const item of l) { const parent = helperMap.get(item.pId); if(parent) { if(!parent.children) { parent.children = [] } parent.children.push(item) } } return root; }