页面恰好铺满时却超出界面并出现滚动条的解决方法

在前端开发过程中，将一个页面中的元素铺满整个界面，即设置

.some-container {
  ...
  width: 100%;  /* 使用vh、vw等单位也同理 */
  height: 100%;
}

时，很多浏览器打开该页面时会发现该容器的大小超出了界面范围并出现滚动条。

原因

这大概率是由于浏览器默认样式中html元素自带的margin值不为0。

解决方法

解决这个问题的关键是将页面的margin值设置为0。

最简单的方法是简单粗暴地将所有元素的margin值都重置为0，这一做法比较符合我们的直觉也易于实现。

在CSS中，可以使用通配符*来对所有元素进行样式设置：

* {
  margin: 0;
  padding: 0;
}