爲什麼viewport的寬度不能用於邊框？

我想完美地將子元素放在父元素中。孩子的正確高度和寬度似乎是14vw。我從16vw（父母的寬度和高度）中減去2vw（父母和孩子的邊框數量）得到了這個數字。然而，當我調整瀏覽器的大小時，孩子的底部邊界與父母之間存在明顯的差距。右邊界之間的距離也較小。爲什麼viewport的寬度不能用於邊框？

看來，視口的寬度不像我預期的那樣。任何解釋爲什麼會出現這種情況？

我也注意到，當我檢查開發人員工具中的邊框元素時，它始終是一個整數。如果視口寬度是瀏覽器寬度的1％，則看起來情況並非如此。

body { 
 
    height: auto; 
 
    width: auto; 
 
    margin: 0 auto; 
 
} 
 
.container { 
 
    width: 16vw; 
 
    height: 16vw; 
 
    border: 1vw solid black; 
 
    margin: 0 auto; 
 
} 
 
.child { 
 
    width: 14vw; 
 
    height: 14vw; 
 
    position: relative; 
 
    border: 1vw solid #654321; 
 
}

<body> 
 
    <div class='container'> 
 
    <div class='child'></div> 
 
    </div> 
 
</body>

來源

2016-09-06 Allison Stafford

是否包含在的METAS視html標題？ – raven

像素舍入我會想象......畢竟......半個像素*看起來像什麼？ –

實際上這個頁面表示像素不需要代表屏幕像素：https：//developer.mozilla.org/en-US/docs/Web/CSS/length – martin

其實，浮點大小是正確的。你可以看到https://developer.mozilla.org/en-US/docs/Web/CSS/length或https://www.w3.org/TR/2005/WD-css3-values-20050726/。它說：

CSS數據類型的值可以插值，以便允許動畫。在這種情況下，它們被插值爲實數，浮點數。插值發生在計算值上。內插的速度由與動畫相關的定時功能決定。

我想你的情況發生是因爲瀏覽器無法渲染例如0.5px邊框寬度，所以它總是必須使用四捨五入的整數邊框值。

實際上，你可以通過讓內部.child充滿整個空間，包括它自己的邊框大小設置爲它的尺寸解決這個問題：

width: 100%; 
height: 100%; 
box-sizing: border-box;

參見：https://jsfiddle.net/dsLpa7kg/

來源

2016-09-06 20:15:19 martin

爲什麼viewport的寬度不能用於邊框？

回答

相關問題