Was kann calc() tun? Implementieren Sie ein flexibles Layout mit CSS-CSS-Tutorial-php.cn

Was kann calc() tun? Implementieren Sie ein flexibles Layout mit CSS

青灯夜游

Freigeben： 2018-11-01 16:03:15

Original

2856 Leute haben es durchsucht

Der Inhalt dieses Artikels besteht darin, vorzustellen, was calc() kann. Implementieren Sie ein flexibles Layout mit CSS. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Das Erstellen eines schönen CSS-adaptiven Layouts beginnt mit der Zuweisung von Platz für alle Inhalte in Ihrer Webanwendung. Ein Höhenmerkmal erfordert die Möglichkeit, Bemaßungen mithilfe einer Mischung aus Längeneinheiten anzugeben.

Wie kann ich beispielsweise 50 % der Fläche plus eine feste Menge an Platz (z. B. 10 Pixel) reservieren?

Früher mussten wir sehr komplexe CSS-Stile festlegen, um die oben genannten Effekte zu erzielen, aber jetzt können wir dies ganz einfach mit dem calc()-Attribut tun.

Außerdem können wir das calc()-Attribut überall dort verwenden, wo eine Länge oder Zahl verwendet wird. Beispielsweise können Sie calc() verwenden, um Dinge zu positionieren oder rgb()-Farbwerte festzulegen im Stylesheet Es gibt viele gute Verwendungsmöglichkeiten für .

Lassen Sie uns vorstellen, wie das neue Attribut calc() von CSS3 ein flexibles Layout implementiert. [Empfohlenes Video-Lernen: CSS3-Tutorial]

Was kann calc() tun? Das Attribut

calc() kann überall in einem Stylesheet mit CSS-Längen oder -Zahlen verwendet werden. Informationen zur spezifischen Verwendung von calc() finden Sie im vorherigen Artikel [Wie verwende ich calc? ] gibt es eine ausführliche Einführung, auf die Sie bei Bedarf zurückgreifen können.

Die Funktion calc() bietet zwei Hauptfunktionen, um das Layout flexibler zu gestalten: das Mischen von Prozentsätzen und absoluten Werten sowie die Verwendung gemischter Einheiten.

Prozentsätze mit absoluten Einheiten mischen

Sehen wir uns ein Beispiel für das Mischen von Prozentsätzen mit absoluten Einheiten an. Angenommen, wir wollten 50 % der verfügbaren Fläche abzüglich einer festen Anzahl von Pixeln zuweisen, dann könnten wir schreiben:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			.demo {
				width: 400px;
				/*height: 200px;*/
				border: 1px solid #000;
				margin: 100px auto;
			}
			
			.cx {
				width: calc(100% - 100px);
				background-color: palevioletred;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<div class="cx">这是一段测试文字，背景颜色总是比总面积的50%还要小100像素</div>
		</div>

</html>

Nach dem Login kopieren

Wenn die Hintergrundfarbe rot wäre, würde es so aussehen:

Was kann calc() tun? Implementieren Sie ein flexibles Layout mit CSS

Wenn Sie die übergeordnete Größe reduzieren, sieht es so aus:

Was kann calc() tun? Implementieren Sie ein flexibles Layout mit CSS

Wir können sehen, dass die Vorteile der Verwendung von calc() sehr offensichtlich sind . Durch die Kombination verschiedener Werttypen auf diese Weise kann Ihre Webanwendung das Layout auf Geräten unterschiedlicher Größe mit größerer Kontrolle als zuvor verwalten.

Verwendung gemischter Einheiten

Ein weiterer Vorteil ist die Möglichkeit, Einheiten mit unterschiedlichen Maßen zu kombinieren, um die endgültige Größe zu erhalten. Beispielsweise können Sie die Größe relativ zur aktuellen Schriftgröße festlegen, indem Sie die Einheiten „em“ und „px“ mischen.

.bar {
  height: calc(10em + 3px);
}

Nach dem Login kopieren

Sehen wir uns ein gutes Beispiel für kombinierte Werte an.

Was kann calc() tun? Implementieren Sie ein flexibles Layout mit CSS

Bei Verwendung von calc() können Sie Werte durch +, -, * und /-Symbole addieren, subtrahieren, multiplizieren und dividieren, um verschiedene Sexmöglichkeiten zu erreichen. Calc() kann überall verwendet werden, beispielsweise zum Berechnen und Festlegen von CSS-Längen oder -Zahlen. Wir können Calc() auch zur Berechnung von Winkeln und Frequenzen verwenden.

Hinweis: Wenn Sie das calc()-Attribut in Chrome 19 (Dev-Channel-Build) verwenden möchten, müssen Sie in Firefox seit Version 8 das Präfix -webkit- hinzufügen -moz- Präfix. In der Internet Explorer-Version nach 9 kann es ohne Hinzufügen eines Präfixes verwendet werden.

Zusammenfassung: Das Obige ist der gesamte Inhalt der in diesem Artikel vorgestellten Verwendung des calc()-Attributs von CSS3 zur Implementierung des flexiblen CSS-Layouts.

Das obige ist der detaillierte Inhalt vonWas kann calc() tun? Implementieren Sie ein flexibles Layout mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!