So drücken Sie Dimensionen mithilfe der calc()-Eigenschaft in CSS3 aus

In diesem Artikel wird hauptsächlich die Verwendung des Attributs calc() in CSS3 vorgestellt. Es hat einen bestimmten Referenzwert. Jetzt kann ich es mit Ihnen teilen.

calc(). Die Verwendung des Größenwerts des Berechnungsausdrucks

Wenn wir ein adaptives Layout der Seite implementieren möchten, ist dies normalerweise problematisch, da ein Rand vorhanden ist. Manchmal ist dies jedoch der Fall, wenn wir ein Eingabefeld mit adaptiver Breite implementieren möchten auch wegen der Existenz von padding oder margin , was ziemlich umständlich ist und der Endeffekt aufgrund der Browserkompatibilität inkonsistent ist. 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, verwenden wir Dargestellt durch mathematische Ausdrücke:

.haorooms {   
  width: calc(expression);   
}

Auf diese Weise können Auffüllung, Rand und Prozentsatz zusammen verwendet und das Problem gelöst werden.

Zum Beispiel beträgt unser Rand 20 Pixel. Dann können wir schreiben:

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

kann auch so verwendet werden:

.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: Blockelement auf der Seite positioniert , 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: Größe des Formulars automatisch ändern und an den Container anpassen

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 gesamte Inhalt dieses Artikels, ich hoffe, das wird so sein Nützlich für das Lernen aller. Bitte beachten Sie die chinesische PHP-Website für weitere verwandte Inhalte!

Verwandte Empfehlungen:

Informationen zur CSS3-Animation zur Erzielung eines Frame-für-Frame-Animationseffekts

So verwenden Sie die CSS3-Box -reflektieren, um einen Reflexionseffekt zu erzeugen

Das obige ist der detaillierte Inhalt vonSo drücken Sie Dimensionen mithilfe der calc()-Eigenschaft in CSS3 aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!