Was ist das Ergebnis von calc() In CSS

Question

Wir haben jetzt begonnen, calc() in CSS zu verwenden, um Breiten auf ein Ergebnis der Berechnung festzulegen. Zum Beispiel:

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


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

Ich weiß, wie calc() funktioniert, aber ich möchte nur wissen, was in CSS zurückgegeben wird, an der Stelle der calc(100% - 3px); in dem oben angegebenen Beispiel.

Was ist meine Verwirrung?

• Im obigen Beispiel width:calc(100% - 3px);

• sagen, dass die Breite 100% tatsächlich 100px ist, die zur Laufzeit durch CSS bestimmt wird.

• Also die berechnete Breite wird 100px-3px=97px 97px sein und wenn Sie es umwandeln in %97% richtig?

Aber jetzt gibt es zwei Möglichkeiten

• 97px zurückgeführt wird, die als eine Breite eingestellt ist.

• 97% zurückgegeben wird, die als Breite festgelegt ist.

Meine Frage ist:

In beiden Fällen nun die Breite ist auf 97px eingestellt werden, aber was ist zurück als Ergebnis width:calc(100% - 3px);, 97px OR 97%?

Sie auch diese Geige sehen: http://jsfiddle.net/8yspnuuw/1/

EDIT: Bitte lesen Sie

Freunde Siehe: Nehmen Sie ein einfaches Beispiel:

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

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

weiß, dass ich die Breite von Kind wird 160 px, wenn es gerendert wird. okay! aber das ist nicht was in CSS gesetzt ist richtig? css setzt es in%, es wird nur in Pixeln gerendert.

So ähnlich, Calc verwenden, es % oder pixel zurückkehrt

Oder meine Frage zu erklären, lesen BoltClocks answer, was der berechnete Wert ist, (und nicht der verwendete Wert, ich weiß, dass das in Pixeln ist)

Answer 1

Die spec definiert nicht sehr streng, was der berechnete Wert eines calc() Ausdruck ist jedoch sagt es, dass Prozentsätze werden nie berechnet als Teil des berechneten Wertes. Wie genau dieser Wert repräsentiert ist, bleibt als Implementierungsdetail übrig. Wenn Sie statt eines Prozentwerts eine Pixellänge sehen, ist diese Länge der verwendete Wert und nicht der berechnete Wert, da der Pixelwert nur nach nach berechnet werden kann.

Beachten Sie, dass getComputedStyle() Ergebnisse zurückgeben kann, die nicht mit der CSS-Definition von "berechneten Wert" übereinstimmen. Dies ist eine der vielen unglücklichen Folgen, wenn Browser ihr eigenes Ding in den 90er Jahren machen.

Answer 2

Die gerenderten Breiten sind in Pixeln.

Answer 3

Unabhängig davon, wie groß die Pixelgröße des calcWidth div ist, wird der Wert 3 davon reduziert. Wenn beispielsweise die Breite des übergeordneten Elements 200 ist, beträgt die Breite des calcWidth div 197px. so ist es px und nicht%

Demo

document.getElementById('calcWidth').offsetWidth;