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; height: 100%; }

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

<template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-view/> </div> </template> <style> body,html{ margin: 0; height: 100%; } #app { height: 100%; font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; background-color: #42b983; } #nav { padding: 30px; } #nav a { font-weight: bold; color: #2c3e50; } #nav a.router-link-exact-active { color: #42b983; } </style>

解决后效果

解决四周白边问题： 解决定高问题：