在vue组件中使用样式的最佳实践是什么？

亚历克斯·亨特（Alex Hunter）：

我正在使用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中做出的行为，也许是范围属性？但是为什么？做什么用的？如何解决？

Niklesh Raut：

您可能不知道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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2020-07-17

我来说两句

0 条评论

登录后参与评论

样式组件中“ ThemeProvider”的最佳实践是什么？

在组件内部使用redux状态的最佳实践是什么？

在vue组件中使用样式的最佳实践是什么？

在vue组件中使用样式的最佳实践是什么？

Qt Creator Windows 10 - “使用 jom 而不是 nmake”不起作用

使用next.js时出现服务器错误，错误：找不到react-redux上下文值；请确保组件包装在<Provider>中

SQL Server中的非确定性数据类型

Swift 2.1-对单个单元格使用UITableView

如何避免每次重新编译所有文件？

在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听

应用发明者仅从列表中选择一个随机项一次

在 Avalonia 中是否有带有柱子的 TreeView 或类似的东西？

HttpClient中的角度变化检测

在Wagtail管理员中，如何禁用图像和文档的摘要项？

如何了解DFT结果

Camunda-根据分配的组过滤任务列表

错误：找不到存根。请确保已调用spring-cloud-contract：convert

为什么此后台线程中未处理的异常不会终止我的进程？

构建类似于Jarvis的本地语言应用程序

使用分隔符将成对相邻的数组元素相互连接

您如何通过 Nativescript 中的 Fetch 发出发布请求？

通过iwd从Linux系统上的命令行连接到wifi（适用于Linux的无线守护程序）

使用React / Javascript在Wordpress API中通过ID获取选择的多个帖子/页面

使用 text() 獲取特定文本節點的 XPath