CSS3 -Edelsteine: Die Funktion calc ()

detaillierte Erläuterung der CSS3 Calc () Funktion: Ein leistungsstarkes Werkzeug für flexibles Layout

Kernpunkte

• CSS3 calc() -Funktionen ermöglichen die Berechnung von Länge, Anzahl, Winkel, Übergangs-/Animationszeit oder Schallfrequenz und unterstützen Sie das Mischen verschiedener Einheitentypen. Diese Funktion ist besonders in Layout -Designs nützlich, da sie genaue Breitenberechnungen in flüssigen oder reaktionsschnellen Layouts ermöglicht.
• calc() Die Browser -Unterstützung von Funktionen ist derzeit begrenzt. Internet Explorer 9 und Firefox (vorangestellter) native Unterstützung, aber Webkit (Chrome und Safari) und Opera werden noch nicht implementiert. In Stylesheets können jedoch progressive Verbesserungen verwendet werden, um die Kompatibilität für verschiedene Browser zu gewährleisten.
Die Funktionen
• und min() von max() cSS3 geben die minimalen oder maximalen Werte von zwei oder mehr von Kommas getrennten Werten zurück und werden auch zur Steuerung der relativen Schriftgröße verwendet, werden jedoch derzeit nicht von einem neuesten Browser unterstützt.

Es gibt viele Schätze, die in der modularen Spezifikation von CSS3 versteckt sind. In diesem Artikel wird eine sehr nützliche Eigenschaft vorgestellt, die die Art und Weise, wie Sie das Layout -Design umgehen, ändern. CSS3 calc() -Funktionen werden hauptsächlich zur Berechnung der Länge, der Anzahl, des Winkels, der Übergangs-/Animationszeit oder der Schallfrequenz verwendet. Sie können jedoch Messarten mischen - ein leistungsstarkes Konzept in CSS. Betrachten Sie ein Website -Layout, das zwei schwimmende Elemente enthält. Sie möchten, dass diese beiden Elemente gleiche Breiten haben und durch einen horizontalen Rand von 60px getrennt sind. Klingt einfach? Kein Problem in festen Breitendesigns; Aber was ist mit flüssigen oder reaktionsschnellen Layouts? Die Seitenbreite kann nicht ermittelt werden, sodass die meisten Entwickler jedes Element auf 45%festlegen. Nur wenn die Seite 600px beträgt, sind 10% der Ränder 60px; Glücklicherweise ermöglicht die neue calc() -Funktion es uns, die Breite zu berechnen. In diesem Fall möchten wir, dass beide Elemente zu 50% minus 30px sind, zum Beispiel: calc()

#element1, #element2 {
  float: left;
  width: calc(50% - 30px);
}

#element2 {
  margin-left: 60px;
}

Vielleicht möchten Sie einen Rand in Bezug auf die Schriftgröße - zum Beispiel 4EM? Kein Problem:

#element1, #element2 {
  width: calc(50% - 2em);
}

Oder Sie möchten einen 2px -Rand um beide Elemente hinzufügen:

#element1, #element2 {
  width: calc(50% - 2em - 4px);
  border: 2px solid #000;
}

Ich schlage vor, Sie halten die Berechnung einfach, aber Sie können komplexe Formeln verwenden, wie z. B.

#element1, #element2 { width: calc((50% + 2em)/2 + 14px); }

Browser -Unterstützung

Funktionen sind W3C -Empfehlungen. Welcher Browser bietet also native Unterstützung? Falsch. Zum Zeitpunkt des Schreibens gibt es nur Internet Explorer 9. Firefox unterstützt es auch mit einem Präfix; Es ist nicht in Webkit (Chrome und Safari) oder Opera implementiert. Es ist jedoch sehr nützlich und ich bezweifle, dass wir nicht zu lange warten müssen. Glücklicherweise können Sie progressive Verbesserungen in Ihrem Stylesheet verwenden: calc() -moz-calc()

Denken Sie daran, dass Sie auch die Ränder entsprechend anpassen müssen, zum Beispiel:

#element1, #element2 {
  width: 45%; /* 所有浏览器 */
  width: -moz-calc(50% - 30px); /* Firefox 4+ */
  width: calc(50% - 30px); /* IE9+ 和未来的浏览器 */
}

#element2 {
  margin-left: 10%; /* 所有浏览器 */
  margin-left: -moz-calc(60px); /* Firefox 4+ */
  margin-left: calc(60px); /* IE9+ 和未来的浏览器 */
}

css3

und min()

Wenn Sie calc() mögen, werden Sie die Funktionen min() und max() mögen. Sie akzeptieren zwei oder mehr von Kommas getrennte Werte und geben den minimalen oder maximalen Wert entsprechend zurück, zum Beispiel:

#element1, #element2 {
  float: left;
  width: calc(50% - 30px);
}

#element2 {
  margin-left: 60px;
}

Diese Funktionen sind besonders nützlich, wenn relative Schriftgrößen verwendet werden, um sicherzustellen, dass der Text nicht zu groß oder zu klein wird. Leider werden min() und max() derzeit in keinem der neuesten Browser unterstützt. Hoffen wir, dass sie bald erscheinen werden.

(Der häufig gestellte Fragen wird hier weggelassen, da der Inhalt dieses Teils mit dem Originaltext sehr wiederholt wird, die Pseudooriginalität schwieriger ist und die Länge länger ist, was nicht förderlich ist, den Artikel optimiert zu halten.)

Das obige ist der detaillierte Inhalt vonCSS3 -Edelsteine: Die Funktion calc (). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!