なぜポートの幅が表示されないのですか？

子要素をその親の内部に完全に収めたいと思います。子供の正しい高さと幅は14vwと思われました。私は親の幅と高さである16vwから2vw（親と子の境界量）を差し引いてこの数値を得ました。しかし、ブラウザのサイズを変更すると、子供の下の境界線と親の間に目立った隙間ができます。右の境界線の間には小さな隙間もあります。なぜポートの幅が表示されないのですか？

私が期待したように、ビューポートの幅が動作していないようです。なぜこれが当てはまるのかについての説明はありますか？

デベロッパーツールの境界要素を調べると、常に整数になります。ビューポートの幅がブラウザの幅の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

は、あなたがのメタ情報でビューポートを含んでいました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

なぜポートの幅が表示されないのですか？

答えて

関連する問題