12

calc()計算結果に幅を設定するために、cssで使用を開始しました。例えば：

<div id='parent'>
<div id='calcWidth'></div>
</div>


   #parent{
           width:100px;
           }
   #calcWidth{
            width:calc(100% - 3px);
            height:100px;
            background:red;
           }

どのように機能するかは知っていますが、上記の例calc()の代わりに、css で何が返されるかを知りたいだけです。calc(100% - 3px);

私の混乱は何ですか？

  • 上記の例ではwidth:calc(100% - 3px);

  • 100%幅は実際には100pxであり、これは実行時に CSS によって決定されます。

  • したがって、計算された幅は100px-3px=97px97pxになり、それを% 97%右に変換すると?

しかし、今、2つの可能性があります

  • 97pxが返され、幅として設定されます。

  • 97%が返され、幅として設定されます。

私の質問は:

どちらの場合も、幅は に設定されますが、OR97pxの結果として何が返されますか?width:calc(100% - 3px);97px97%

このフィドルも見ることができます： http://jsfiddle.net/8yspnuuw/1/

編集：読んでください

友達に会いましょう: 簡単な例を見てみましょう:

 <div class='parent'>
    <div class='child'>
    </div>
    </div>

.parent{
width:200px;
}
 .child{
  width:20%
  }

レンダリングすると、子の幅が 160 px になることがわかっています。わかった！しかし、それはcssで設定されているものではありませんよね? css は % で設定し、ピクセル単位でレンダリングされます。

同様に、calc を使用すると、返されるか、または返されます%かpixel

または、私の質問を説明するために、BoltClocks の回答を読んでください。

4

5 に答える 5

9

仕様は、式の計算値が何であるかを厳密に定義していませんcalc()が、計算値の一部としてパーセンテージが計算されることはないと述べています。この値がどの程度正確に表現されるかは、実装の詳細として残されています。

パーセンテージではなくピクセル長が表示されている場合、ピクセル値はパーセンテージを計算して要素を配置した後にのみ決定できるため、その長さは計算された値ではなく、使用される値です。

getComputedStyle()「計算値」の CSS 定義と矛盾する結果を返す場合があることに注意してください。これは、90 年代にブラウザが独自のことを行っていたことによる多くの不幸な結果の 1 つです。

于 2015-02-25T10:10:46.643 に答える
0

calcWidth div のピクセル サイズが何であれ、値 3 はそれから縮小されます。たとえば、親の幅が 200 の場合、calcWidth div の幅は 197px になります。つまり、% ではなく px です。

デモ

 document.getElementById('calcWidth').offsetWidth;

ピクセル jsdemo の画像スタイル

于 2015-02-25T10:01:34.960 に答える
0

CSS は動的な値をサポートしていません ( のような単純なパーセンテージ値をサポートしていませんwidth: 100%;)。つまり、 insideは最初に 1 回だけ変換され、継続100%的に変換されるわけではありません。calc()px

それはすでにあなたの質問に答えています。-valueはend%に変換され、最終的には になります。スクリーンショットを撮ったり、測定したりすることで確認できます。px97pxwindow.getComputedStyle()

于 2018-07-21T14:27:52.487 に答える