页面闪烁问题：
情形
1. 有滚动条的页面和没有滚动条的页面之间切换导致页面公用的部分如`<header></header>`中的元素在左右方向上抖动。
2. 页面初始加载时，各容器高度尚未被撑起来，此时没有滚动条；而随着内容的加载，当页面容器高度被内容撑起来时，滚动条出现，此时就会出现页面闪烁情况。
解决办法
html{
padding-left: calc(100vw - 100%);
}
- 100vw是浏览器的视图宽度，是固定死的，不会受到滚动条的显隐影响；而100%只包含html标签的宽度，不包含滚动条的宽度。因此，calc(100vw - 100%)的宽度就是滚动条的宽度。
- 但是这个方法只适用于网页内容居中展示，而且网页内容的宽度单位不能是%号的情况。这种情况下，滚动条出现，padding-left由原来的0变成滚动条的宽度，这样，居中的内容并不会变化，页面就不会闪烁。
html{
overflow-y: scroll;
overflow-x: hidden;
}
- 让滚动条始终显示，这样宽度就不会因为滚动条显隐的关系而变化了。不过这样滚动条一直显示，样式上有些许的奇怪。
html{
margin-right: calc(100% - 100vw);
overflow-x: hidden;
}
- 这个方法我觉着甚是巧妙啊，这里贴上参考链接：qqdie.com/archives/we…
- 这个方法也存在一定的缺陷，那就是当滚动条出现时，页面右侧有一个滚动条的宽度的内容会因为margin-right赋负值的原因而不可见。
html::-webkit-scrollbar{
display: none;
}
::-webkit-scrollbar 仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用。兼容性不够，不是很推荐使用- 使用css将滚动条隐藏掉。这样即便页面需要滚动，滚动条也不会出现，宽度也就不会变化。而且不影响使用鼠标滑轮滚动页面。不过如果是高度比较大的页面，就无法满足用户拖拽滚动条的需求了。
综上所述，四种方法各有优劣...
