本文共 598 字，大约阅读时间需要 1 分钟。

通过VueCLI新创建的Vue项目，页面存在一些问题：

• 页面四周有空白
• 页面默认不会占满浏览器高度
  

页面周围空白问题原因：

VueCLI新创建的Vue项目，页面默认外边距为8px；

页面高度100%设置问题原因

我们知道：

• 如果一个div块级元素没有主动为其设置宽度和高度，浏览器会为其分配可以使用的最大宽度，但是不会分配高度；
• 另外块级元素的高度是由子元素堆砌起来的，因此html和body标签的高度也是由子级元素堆撑起来；
• 元素高度百分比需要向上遍历父标签找到一个定值高度才能起作用，如果中间有一个标签高度为auto或者是没有设置height属性，则高度百分比不起作用；
• div的父元素为body，body的父元素为html，设置html的height为100%，即获取浏览器定高；

解决方式

修改App.vue中样式的代码：

html{       height: 100%;  }  body{       margin: 0;    height: 100%;  }

其中修改margin为0则没有页面四周的空白；

解决后效果

解决四周白边问题：

转载地址：http://qhtg.baihongyu.com/