Detaillierte Einführung in die neue Eigenschaft calc() in CSS3

1. Vorwort

calc() sieht aus wie eine Funktion in Javascript, wird aber tatsächlich in CSS verwendet. Sie können damit die Länge (Breite oder Höhe) berechnen und die Werte automatisch an unterschiedliche Bildschirmgrößen anpassen, sodass Sie problemlos eine adaptive Layoutanzeige auf verschiedenen Bildschirmgrößen realisieren können. In Projekten stoßen wir oft auf Elemente, die immer zentriert sein müssen. Natürlich ist die Verwendung von margin: 0 auto; Meine Kollegen sagten mir, ich solle es tun. Erst als ich Calc studierte, verstand ich diese neue Sache in CSS3 wirklich.

2. Verwendung von

Der Parameter in calc() ist eine Berechnungsformel. Durch diese Berechnungsformel wird die Aufgabe der Berechnung von Breite und Wert auf unterschiedliche Weise geworfen Der Browser ermöglicht es der Seite, selbst Rückschlüsse auf die Breite oder den Wert zu ziehen. Bei diesen Berechnungsformeln handelt es sich ebenfalls um sehr einfache Additions- (+), Subtraktions- (-), Multiplikations- (/) Operationen.

p{
    width: calc(15px + 15px);//30px
    width: calc(15px - 10px);//5px
    width: calc(15px*2);//30px
    width: calc(15px/3);//5px}

Wie aus dem obigen Beispiel ersichtlich ist, gibt es ein Leerzeichen zwischen dem in der Additions- ( + ) Subtraktionsoperation ( - ) zu berechnenden Wert und dem -Operator und Diese Leerzeichen können nicht weggelassen werden, aber Leerzeichen bei Multiplikations- ( *) und Divisionsoperationen ( / ) können weggelassen werden.

Der -Ausdruck in calc() kann mit Einheiten wie Prozentsatz, px, em, rem usw. berechnet werden, und die Einheiten können zur Berechnung gemischt werden:

p{
    width: calc(3em + 5px);//53px}

3. Verschachtelung von calc()

calc() ist eine Funktion, daher kann die Funktion Verschachtelung unterstützen und das Endergebnis kann über verschiedene Formeln berechnet werden.

p{
    --widthA: calc(10px + 190px);
    --widthB: calc(var(--widthA) / 2);
    --widthC: calc(var(--widthB) / 2);
    width: var(--widthC);//50px
}

4. Einfache Zentrierung

Nachdem calc() die Breite berechnen kann, gibt es viele Möglichkeiten, eine zentrierte Anzeige zu implementieren, Padding Oder Marge, aber das Prinzip ist dasselbe.

p{
    padding: 0 calc((100% - 1024px)/2);
}

Angenommen, der mittlere Inhalt hat eine feste Breite von 1024 Pixeln, dann erhalten Sie die Breite des übergeordneten Fensters oder die Breite des Fensters zu 100 % und subtrahieren dann die Breite des Inhalts Teilen Sie die Breite, die der linken und rechten Seite des Inhalts zugewiesen werden muss, in zwei (/2), um zu erreichen, dass der Inhalt mit einer Breite von 1024 Pixeln in der Mitte immer zentriert ist.

5. Kompatibilität

Die Kompatibilität von calc() ist bereits sehr hoch. IE9+, FF4.0+, Chrome und Safari6+ unterstützen bereits die Anwendung calc() Für verschiedene Browser muss noch das Präfix hinzugefügt werden.

div{
    -moz-calc(expression);
    -webkit-calc(expression);
    calc(expression);
　　 //expression为计算公式}

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die neue Eigenschaft calc() in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!