Beschreibung der Verwendung der calc()-Eigenschaft in CSS3 zum Ausdrücken von Größenwerten in Berechnungen

Dieser Artikel beschreibt, wie man das calc()-Attribut in CSS3 verwendet, um Größenwerte mit Berechnungen auszudrücken

Die Verwendung von calc() ist sehr clever. Sie können die Formeln wie wir auflisten Matheaufgaben in der Schule. Berechnen Sie Länge, Breite und andere Werte, um ein adaptives Layout zu erreichen. Im Folgenden stellen wir vor, wie Sie das Attribut calc() in CSS3 verwenden, um Größenwerte in Berechnungen auszudrücken

Wenn wir ein adaptives Seitenlayout implementieren möchten, ist dies normalerweise aufgrund des Vorhandenseins von Rändern problematischer. Wenn Sie ein Eingabefeld mit adaptiver Breite implementieren möchten, ist dies aufgrund des Vorhandenseins von manchmal auch recht umständlich Abstand oder Rand, und gleichzeitig ist der Endeffekt aufgrund der Browserkompatibilität inkonsistent. Das zu CSS3 hinzugefügte neue Attribut box-sizing löst das oben genannte Problem bis zu einem gewissen Grad. Im heutigen Artikel werden wir ein weiteres neu hinzugefügtes Attribut calc() von CSS3 verwenden, um adaptives Layout zu implementieren.

calc() ist ein neu hinzugefügtes Attribut von CSS3. Es ermöglicht Ihnen, einen arithmetischen Ausdruck zum Ausdrücken des Längenwerts zu verwenden, was bedeutet, dass Sie damit die Breite von p definieren und Rand, Abstand und Rand festlegen können , usw.

Calc()-Operationsregeln:
1. Verwenden Sie die vier arithmetischen Operationen „+“, „-“, „*“ und „/“;
2 , em, rem usw. ;
3. Zur Berechnung können verschiedene Einheiten gemischt werden.

Verwendung
Die calc()-Syntax ist sehr einfach, genau wie damals, als wir Addition (+), Subtraktion (-), Multiplikation (*) und Division (/) lernten. Als wir Kinder waren, verwendeten wir Dargestellt durch mathematische Ausdrücke:

.haorooms {   
  width: calc(expression);   
}

Auf diese Weise kann das Problem durch die gemeinsame Verwendung von Auffüllung, Rand und Prozentsatz gelöst werden.

Unsere Marge beträgt beispielsweise 20 Pixel. Dann können wir

.haorooms{   
  width: calc(100% - 20px);  //注：减号前后要有空格，否则很可能不生效！！   
}

schreiben oder es so verwenden:

.box {   
    background: #f60;   
    height: 50px;   
    padding: 10px;   
    border: 5px solid green;   
     width: 90%;/*写给不支持calc()的浏览器*/
    width:-moz-calc(100% - (10px + 5px) * 2);   
    width:-webkit-calc(100% - (10px + 5px) * 2);   
    width: calc(100% - (10px + 5px) * 2);   
}

Beispiel
Beispiel 1: Ein auf der Seite positioniertes Blockelement mit Rändern

.banner {   
  position:absolute;   
  left: 40px;   
  width: -moz-calc(100% - 80px);   
  width: -webkit-calc(100% - 80px);   
  width: calc(100% - 80px);   
  border: solid black 1px;   
  box-shadow: 1px 2px;   
  background-color: yellow;   
  padding: 6px;   
  text-align: center;   
}

Beispiel 2: Ein Formular, das sich automatisch in der Größe ändert und an den Container anpasst

input {   
  padding: 2px;   
  display: block;   
  width: -moz-calc(100% - 1em);   
  width: -webkit-calc(100% - 1em);   
  width: calc(100% - 1em);   
}     

#formbox {   
  width: -moz-calc(100%/6);   
  width: -webkit-calc(100%/6);   
  width: calc(100%/6);   
  border: 1px solid black;   
  padding: 4px;   
}

<form>
  <p id="formbox">
  <label>Type something:</label>
  <input type="text">
  </p>
</form>

Das obige ist der detaillierte Inhalt vonBeschreibung der Verwendung der calc()-Eigenschaft in CSS3 zum Ausdrücken von Größenwerten in Berechnungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!