共计 651 个字符,预计需要花费 2 分钟才能阅读完成。
环境架构
vue2 + vue-cli + element-ui 构建
问题背景
在应用 element-ui 的 Container 布局容器编写基于 vue-cli 环境下的前端页面时发现在浏览器周围别离有白边生成
如图
问题剖析
受【简书】解决 vue element-ui body 页面默认边距 - @web28 的启发,应用 f12 关上控制台察看其初始 style,发现 body 中具备 8px 的外边距款式
须要留神的是 察看控制台中的 8px 款式是加在 bady 中的,故若打消白边只能将 body 中的 margin
置0px
,而无奈通过设置 <template>
下的根元素 style 打消
问题解决
依据控制台中的展现,只有在 body 中增加 margin: 0px
款式即可解决白边问题
代码:
<template>
<div id="app" >
1111111
</div>
</template>
<script>
export default {name: 'App',}
</script>
<style>
body{margin: 0px;}
#app {background-color: red;}
</style>
效果图:
问题思考
本来认为白边是 element-ui 生成的,然而应用 npm uninstall elementui
装配掉 element 后仍然存在该 style,初步判断是 vue 生成的,然而生成起因不详,如果有大佬晓得其中一二,欢送评论
参考资料
【简书】解决 vue element-ui body 页面默认边距 - @web28 https://www.jianshu.com/p/877a4a24dd6c
正文完