我一直試圖了解使用寬度 100% 與寬度 100vw 的實際用途。使用 margin:0 和其他方式有什么不同？
uj5u.com熱心網友回復：
當您將寬度指定為百分比時，它是包含塊寬度的百分比。因此，如果您有一個寬度為 400px 的 div，并且其中還有另一個寬度為 100% 的 div，則內部 div 將為 400px。
100vw是視口寬度的 100%。如果您有一個 1200 像素寬的視窗，并且您將上面示例中的內部 div 設定為 100vw，它將是 1200 像素，而不是 400 像素。
uj5u.com熱心網友回復：
假設您有一個 ，您想要填充整個視圖寬度的直接子級： 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>
uj5u.com熱心網友回復：
%值表示父元素的百分比，vw值直接表示視口寬度，無論父元素是什么。
所以如果你有一個寬度的 div 50vw，并且在它里面，
<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>uj5u.com熱心網友回復：
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，任何滾動條也算作寬度的一部分，并且邊距也包括在整個寬度中。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/477741.html
標籤：css
上一篇：專案未正確對齊CSS