> For the complete documentation index, see [llms.txt](https://sunzsh.gitbook.io/xiaoshan.bug/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sunzsh.gitbook.io/xiaoshan.bug/hao-fei-4-xiao-shi-zheng-li-le-9-ge-qian-duan-jing-dian-wen-ti.md).

# 耗费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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
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>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.