# 耗费4小时整理了9个前端经典问题

* 抖音：<https://v.douyin.com/iJBwxmvy/>
* B站：<https://www.bilibili.com/video/BV1n14y1q7YF/>

> 1、margin-top的百分比是根据父元素宽度计算的【2021-09-03】 <https://v.douyin.com/iJMCbs7S/>
>
> 2、全屏情况下，相比100%、100vw更容易产生滚动条【2022-11-28】 <https://v.douyin.com/iJMGmXHY/>
>
> 3、粘性布局sticky不起作用，大概率只有2个原因
>
> &#x20;  3.1、某个父级存在overflow不等于visible的情况【2021-07-07】
>
> &#x20;        <https://v.douyin.com/iJr2DKs1/>
>
> &#x20;  3.2、其父元素也完全滚出屏幕了【2021-07-09】&#x20;
>
> &#x20;        <https://v.douyin.com/iJMxXQrq/>
>
> 4、console.log并不能打印一个对象的快照，而是输出一个引用到控制台【2022-05-07】      &#x20;
>
> &#x20;        <https://v.douyin.com/iJMVCa1D/>
>
> 5、默认的text-align（baseline）特别容易出现3类问题：
>
> ```
> 不对齐：
> https://v.douyin.com/iJMX1aG2/ 【2021-08-25】并列的div不对齐
> https://v.douyin.com/iJMGuYyk/ 【2022-12-11】小图标与文字不对齐
>
> 出现缝隙：
> https://v.douyin.com/iJM4hasQ/ 【2021-12-28】容易造成图片上下有缝隙 
>
> 多出滚动条：
> https://v.douyin.com/iJMbdCoe/ 【2022-06-08】容易引发父元素多出滚动条
> https://v.douyin.com/iJMsMJoo/ 【2022-09-22】一个全屏canvas默认情况下可能会使网页多出滚动条
> ```
>
> 6、js使用scrollHeight的时候，一定要考虑相比其内容的高度是否有富裕【2022-10-14】 <https://v.douyin.com/iJMsXnf2/>
>
> 7、如果元素的数量会变化，那么forEach遍历Array和Set的时候一定注意效果上的区别【2022-06-29】 <https://v.douyin.com/iJMpSDcw/>
>
> 8、使用fiexd定位时，Apple全系浏览器（Webkit内核）有一种情况没有遵循W3C标准【2023-01-10】 <https://v.douyin.com/iJMtgnBs/>
>
> 9、所有vue组件第一层容器样式的类名务必不要跟父组件的类名冲突【2022-09-30】 <https://v.douyin.com/iJrY6uSN/>

昨晚花了4个小时

把我所有的视频过了一遍

然后整理了

个我觉得前端比较经典和常见的问题

我把这9个问题分别用一句话概括

然后配上封面和发布日期

给大家分享一下

同时呢

也会把这些视频的入口放到1024bugs上面


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sunzsh.gitbook.io/xiaoshan.bug/hao-fei-4-xiao-shi-zheng-li-le-9-ge-qian-duan-jing-dian-wen-ti.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.