环境架构
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
发表回复