vue3.0项目中：如何填充屏幕？

最新推荐文章于 2024-04-18 20:20:27 发布

锐明清风

最新推荐文章于 2024-04-18 20:20:27 发布

阅读量505

点赞数 2

分类专栏：前端文章标签： vue.js node.js

本文链接：https://blog.youkuaiyun.com/coder184/article/details/136082287

版权

前端专栏收录该内容

5 篇文章

订阅专栏

本文详细解释了index.html中的代码，包括设置body和div的样式，确保元素紧贴、高度100%以及重写默认padding以消除间距。重点强调了内联style的优先级问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

index.html的代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
</head>

<body>
  <div id="app" class="bg" style="grid-template-columns: auto;padding: 0%;"></div>
  <script type="module" src="/src/main.ts"></script>
</body>
<style type="text/css">
  body {
    padding: 0;
    margin: 0;
  }

  .bg {
    min-width: 100%;
    position: absolute;
    height: 100%;
  }
</style>

</html>

说明：

1.设置body和div的style；

2.使body紧贴HTML，同时body中的子元素紧贴body；

3.div的weight和height，均设置为100%；

4.div的position设置为absolute；

5.如果设置min-height为100%，内部的子元素设置很大，滑动时会发现上下内容不全；

6.div标签内的style：padding：0%，这样设置是为了重写div默认的 padding：0 2rem；

7.上述6中的重写是为了消除div中元素与div的间隔，不重写的话，屏幕左右会出现间隙；

8.不可将padding：0%放在独立的style中，这样放置，不会产生重写效果；

9.上述8说明，标签内的style权限或者是优先级，高于独立的style；