滴答 超简单歌词同步模板

马黑黑

樵歌 发表于 2022-6-18 07:44
嗯，貌似女徒儿做得好好些哈

瞧瞧，这是好领导的眼光

马黑黑

红影 发表于 2022-6-18 07:32
可我之前的确不知道，奇葩不

这个和你写一个Word文档是一样的，写到哪是哪的样纸

马黑黑

红影 发表于 2022-6-18 07:31
挺漂亮的

蟹蟹

红影

马黑黑 发表于 2022-6-18 09:32
这个和你写一个Word文档是一样的，写到哪是哪的样纸

这话不很明白。

马黑黑

红影 发表于 2022-6-18 21:03
这话不很明白。

就是，你起一个新行，新的行就在它改在的位置，在上一行的下方

红影

马黑黑 发表于 2022-6-18 21:09
就是，你起一个新行，新的行就在它改在的位置，在上一行的下方

哦哦，你是说和文字模板一样的，知道了

马黑黑

红影 发表于 2022-6-18 22:22
哦哦，你是说和文字模板一样的，知道了

这就是文档流，自然排列的顺序

红影

马黑黑 发表于 2022-6-18 22:23
这就是文档流，自然排列的顺序

有意思，这里面竟然隐藏一个空间。

马黑黑

红影 发表于 2022-6-19 22:39
有意思，这里面竟然隐藏一个空间。

这个本来是很自然的东西：一切原本按文档流顺序排列，然后有一些元素定位了，就可能脱离文档流所对应的位置，绝对和固定定位时它在文档流对应处不占位，相对定位时如果元素不在原位，原位也占据位置。

红影

马黑黑 发表于 2022-6-19 22:47
这个本来是很自然的东西：一切原本按文档流顺序排列，然后有一些元素定位了，就可能脱离文档流所对应的位 ...

“相对定位时如果元素不在原位，原位也占据位置。”那么这个相对位置是相当于文档流的还是相对于背景的？

马黑黑

红影 发表于 2022-6-20 13:24
“相对定位时如果元素不在原位，原位也占据位置。”那么这个相对位置是相当于文档流的还是相对于背景的？

相对于文档流

举个栗子：

<p>第一行</p>
<p style="position: relative; left: -200px; top: -300px;">第二行</p>
<p>第三行</p>

这里，按照文档流，第二行本应在第一行的后面，但它用了相对定位，把自己放到了{ -200，-300} 的位置，它就不会出现在第一行的后面，但它在第二行后面的位置依然占位，第三行与第一行因此并不能连在一起，隔着一行的距离。

红影

马黑黑 发表于 2022-6-20 19:15
相对于文档流

举个栗子：

嗯嗯，懂了。
看你把歌词放到右下角后，长歌词会让整体忘回移，这个也是文档流起的作用吧。若是背景用overflow: hidden，不知道歌词会不会被吃掉。

马黑黑

红影 发表于 2022-6-21 16:40
嗯嗯，懂了。
看你把歌词放到右下角后，长歌词会让整体忘回移，这个也是文档流起的作用吧。若是背景用ov ...

右对齐时，反向拉伸，都没突破父框，所以不会受 hidden 影响

红影

马黑黑 发表于 2022-6-21 19:07
右对齐时，反向拉伸，都没突破父框，所以不会受 hidden 影响

原来它还可以反向拉伸。还以为原地不动，冲出去的会被剪掉呢

马黑黑

红影 发表于 2022-6-21 21:15
原来它还可以反向拉伸。还以为原地不动，冲出去的会被剪掉呢

定位右边，它就向左边延伸，定位下边，它就往上延伸，二者反之皆然。有空试试。

红影

马黑黑 发表于 2022-6-21 21:16
定位右边，它就向左边延伸，定位下边，它就往上延伸，二者反之皆然。有空试试。

还是给它流出足够空间的好，佛足额看着它移动也怪怪的呢

马黑黑

红影 发表于 2022-6-21 22:05
还是给它流出足够空间的好，佛足额看着它移动也怪怪的呢

特别是反向的

红影

马黑黑 发表于 2022-6-21 22:12
特别是反向的

是啊，反向的尤其明显。

马黑黑

红影 发表于 2022-6-22 09:19
是啊，反向的尤其明显。

反正可以定制，自己设定一下尺寸

红影

马黑黑 发表于 2022-6-22 12:22
反正可以定制，自己设定一下尺寸

嗯，人为把它扔在一定范围里就行了。