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

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

高洛峰

Freigeben： 2017-03-09 16:47:01

Original

1970 Leute haben es durchsucht

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);   
}

Nach dem Login kopieren

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);  //注：减号前后要有空格，否则很可能不生效！！   
}

Nach dem Login kopieren

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);   
}

Nach dem Login kopieren

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;   
}

Nach dem Login kopieren

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;   
}

Nach dem Login kopieren

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

Nach dem Login kopieren

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!