在 vue 组件中使用样式的最佳实践是什么？
Ale*_*ter 8 html css vue.js vuejs2
我使用 vue cli 创建一个项目，但我的样式有“错误”
我只是在测试一个有 3 行 20vh 50vh 30vh 的组件
<template>
<div class="gridContact">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</template>
<style scoped>
.gridContact {display: grid; grid-template-areas: 'one' 'two' 'three'; box-sizing: border-box;}
.one {grid-area: one; background: rebeccapurple; box-sizing: border-box; height: 20vh; }
.two {grid-area: two; background: cadetblue; box-sizing: border-box; height:50vh;}
.three {grid-area: three; background: coral; box-sizing: border-box; height: 30vh; }
</style>
还有我的 app.vue
*{padding: 0; margin: 0; box-sizing: border-box;}
我得到了这种风格（需要的风格）
但是如果我刷新页面，我会得到这个破坏样式的空白，然后如果再次重新加载它看起来不错，然后如果我刷新我得到相同的空白，为什么？
在开发人员工具上检查此行为，我看到注入了此属性，当然，我没有插入该边距，我认为这是在 vue 中创建的行为，也许是作用域属性？但为什么呢？有什么用？如何解决？
由于您不知道 body 的margin-bottom应用位置，就像下面的示例一样，我故意添加margin-bottom到 body 并应用了您的样式。
.gridContact {display: grid; grid-template-areas: 'one' 'two' 'three'; box-sizing: border-box;}
.one {grid-area: one; background: rebeccapurple; box-sizing: border-box; height: 20vh; }
.two {grid-area: two; background: cadetblue; box-sizing: border-box; height:50vh;}
.three {grid-area: three; background: coral; box-sizing: border-box; height: 30vh; }
body{
margin-bottom:50px;
}
*{padding: 0px; margin: 0px; box-sizing: border-box;}<body>
<div class="gridContact">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>现在我包含了!important强制应用我的 css 样式并且它起作用了。
.gridContact {display: grid; grid-template-areas: 'one' 'two' 'three'; box-sizing: border-box;}
.one {grid-area: one; background: rebeccapurple; box-sizing: border-box; height: 20vh; }
.two {grid-area: two; background: cadetblue; box-sizing: border-box; height:50vh;}
.three {grid-area: three; background: coral; box-sizing: border-box; height: 30vh; }
body{
margin-bottom:50px;
}
*{padding: 0px !important; margin: 0px !important; box-sizing: border-box;}<body>
<div class="gridContact">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>