Css 为什么VW装置不能在容器上产生定心结果？_Css

Css 为什么VW装置不能在容器上产生定心结果？

css

Css 为什么VW装置不能在容器上产生定心结果？,css,Css,我正在为自己创建一个公文包站点，我不想使用外部UI库来实现这一点。我想制作一个“容器”，在页面的左右边缘有2.5vw的边距。内部内容物的宽度为95vw。在800px下测试时，内部内容物的宽度为760px。但左边缘似乎介于4-4.5vw和右边缘0.5-1vw之间。Chrome Inspector显示的唯一边距是每边20像素，这是不正确的我试着将整个车身宽度设置为95vw，边距设置为0.2.5vw。我还尝试过去掉导航栏的宽度，调整它的位置（不确定为什么我要测试它，因为我希望整个站点都使用它）。我在

我正在为自己创建一个公文包站点，我不想使用外部UI库来实现这一点。我想制作一个“容器”，在页面的左右边缘有2.5vw的边距。内部内容物的宽度为95vw。在800px下测试时，内部内容物的宽度为760px。但左边缘似乎介于4-4.5vw和右边缘0.5-1vw之间。Chrome Inspector显示的唯一边距是每边20像素，这是不正确的

我试着将整个车身宽度设置为95vw，边距设置为0.2.5vw。我还尝试过去掉导航栏的宽度，调整它的位置（不确定为什么我要测试它，因为我希望整个站点都使用它）。我在Chrome、Firefox和Opera上打开了这个文件，每个文件都有相同的结果

这是包含前几行的HTML

<body>
    <div class="container">
      <nav class="top-nav">
        <ul class="nav-list">
          <li><a href="#">Home</a></li>

我期望2.5vw（左边缘）95vw（宽）2.5vw（右边缘），但我正在接近4.5vw（左边缘），95vw（宽），0.5vw（右边缘）。值得一提的是，转换成百分比确实有效，但我希望尽可能多地使用相同的单位。

您的风格似乎还可以

可能你在另一种风格中有一些问题，你还没有发布

看到你的代码工作：

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
背景颜色：黄色；
}
.集装箱{
背景颜色：蓝色；
宽度：95vw；
利润率：0.2.5vw；
高度：50px；
}
.顶部导航{
背景：绿色；
不透明度：0.9；
位置：固定；
排名：0；
左：2.5vw；
宽度：95vw；
高度：30px；
}

你的风格似乎还不错

可能你在另一种风格中有一些问题，你还没有发布

看到你的代码工作：

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
背景颜色：黄色；
}
.集装箱{
背景颜色：蓝色；
宽度：95vw；
利润率：0.2.5vw；
高度：50px；
}
.顶部导航{
背景：绿色；
不透明度：0.9；
位置：固定；
排名：0；
左：2.5vw；
宽度：95vw；
高度：30px；
}

为什么不直接使用

margin:0 auto

？这可能是一个解决方案，因为我还不需要指定另一个单位。为什么不直接使用

margin:0 auto

？这可能是一个解决方案，因为我还不需要指定另一个单位。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: yellow;
}

.container {
  background-color: blue;
  width: 95vw;
  margin: 0 2.5vw;
}

.top-nav {
  background: green;
  opacity: 0.1;
  position: fixed;
  top: 0;
  left: 2.5vw;
  width: 95vw;
}