--- title: 周报 author: powerfulyang date: 2022-10-14 public: true tags: - 周报 - 2022-10-14 --- ## 2022-10-14 ### Concept 1. 关于 vertical-align 的使用，`Line-relative values` 不会改变基线，之后元素不会被影响。`Parent-relative values` 会改变基线，之后的元素默认会按照该元素对齐。 + Parent-relative values + baseline + sub + super + text-top + text-bottom + middle + + + Line-relative values + top + bottom 2. 关于 scrollIntoView 的使用。 #### vertical-align inline element 可以使用 vertical-align 竖直对齐 ```codepen ``` #### scrollIntoView Syntax: ```js scrollIntoView() scrollIntoView(alignToTop) scrollIntoView(scrollIntoViewOptions) ``` + alignToTop(Optional) + `true`, Corresponds to `scrollIntoViewOptions: {block: "start", inline: "nearest"}`. This is the default value. + `false`, Corresponds to `scrollIntoViewOptions: {block: "end", inline: "nearest"}`. + scrollIntoViewOptions(Optional) + `behavior`(Optional) Defines the transition animation. One of `auto` or `smooth`. Defaults to `auto`. + `block`(Optional) Defines vertical alignment. One of `start`, `center`, `end`, or `nearest`. Defaults to `start`. + `inline`(Optional) Defines horizontal alignment. One of `start`, `center`, `end`, or `nearest`. Defaults to `nearest`. ### 每日一题 #### Tree and List ```js 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; } ```

标签: 滚动控制

笔记(1)

前端技术精进：vertical-align与滚动探索