css - 有人可以解释 Width: 100% VS. 之间的区别吗?宽度:100vw 以简单的方式?

我一直试图了解使用宽度 100% 与宽度 100vw 的实际用途。使用 margin:0 和其他方式有什么不同?

回答1

当您将宽度指定为百分比时,它是包含块宽度的百分比。因此,如果你有一个宽度为 400px 的 div,并且其中还有另一个宽度为 100% 的 div,那么内部 div 将是 400px。

100vw 是视口宽度的 100%。如果你有一个 1200px 宽的窗口,并且在上面的示例中将内部 div 设置为 100vw,它将是 1200px,而不是 400px。

回答2

假设您有一个 ,您想要填充整个视图宽度的直接子级: 100vw;高度:100vh;所以你使用宽度:100vw;高度:100vh;宽度:100vw;高度:100vh; .一切都与宽度相同:100%;高度:100vh;宽度:100% 高度:100vh;直到您添加更多内容并出现垂直滚动条。因为 vw 将滚动条视为视口的一部分,所以 width: 100vw;宽度会稍大:100%;这种细微的差异最终会添加一个水平滚动条(需要用户看到这个额外的宽度),因此,两种情况下的高度也会略有不同。

在决定使用哪一个时必须考虑到这一点,即使父元素与文档的视口大小相同。

例子:

使用宽度:100vw; :

.fullviewport {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100vw;
  height: 20vh;
  background-color: blue;
}
<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>

回答3

% values 表示父元素的百分比,vw values 直接表示视口宽度,不管父元素是什么。

因此,如果您有一个宽度为 50vw 的 div,并且在其中,

<div style="width: 50%"></div>   /* 50% of the parent(50vw) so half of it */
<div style="width: 50vw"></div>  /* 50vw, so the same width as the parent */
.container  {
  width: 50vw;
  
  background-color: green;
}

.percent {
  width: 50%;
  height: 20vh;
  
  background-color: blue;
}

.vw {
  width: 50vw;
  height: 20vh;
  
  background-color: red;
}
<div class="container">
  50vw width
  <br>
  <div class="percent"> 50% width</div>
   <div class="vw"> 50vw width</div>
</div>

回答4

VW 是 Viewport 宽度,% 是父元素的百分比。如果您有一个 500px 宽的父元素,屏幕为 1080p (1920x1080)。

% 将使子元素宽 500 像素,但对于 VW,子元素将是屏幕的全宽(1920 像素)。

.vw {
  width: 100vw;
  border: 2px solid lime;
}

.pr {
  width: 100%;
  border: 2px solid cyan;
}

.hpx {
  width: 100px;
}
<div class="vw">
  vw
</div>

<div class="pr">
  %
</div>

<br><br>

<div class="hpx">
  <div class="pr" style="border: 2px solid magenta;">
    %
  </div>
</div>


<div class="hpx">
  <div class="vw" style="border: 2px solid yellow;">
    vw
  </div>
</div>

对于 VW,任何滚动条也算作宽度的一部分,并且边距也包括在整个宽度中。

相似文章

python - python 中带有 Tkinter 模块的 Ludo

嗨,我对python比较陌生,现在我被要求使用其中的Tkinter模块做一个Ludo游戏。我已经尽了最大的努力,开发了掷骰子的棋盘和框架。(后来我了解到使用循环可以使这变得更简单)但是带有骰子的框架卡...