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