Vue新建项目——页面初始化

通过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