CSS3 implementiert ein adaptives Layout, das berechnet werden kann

CSS3 implementiert ein adaptives Layout, das berechnet werden kann – calc()

青灯夜游

Freigeben： 2018-10-15 17:53:52

nach vorne

2762 Leute haben es durchsucht

Dieser Artikel stellt Ihnen das adaptive Layout von CSS3 vor, das berechnet werden kann – calc(). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Um zu beginnen, müssen wir verstehen, was calc() eine CSS-Funktion ist. Sie können calc() verwenden, um den Rand, den Abstand, die Breite und andere Attribute des Elements festzulegen

Und Sie können auch einen mathematischen Ausdruck verwenden, um ihn in einer

calc()内部嵌套另一个calc()

clac()-Syntax auszudrücken:

Ausdruck ist ein mathematischer Ausdruck, der zur Berechnung der Länge verwendet wird . Ausdruck, dessen Ergebnis als Endwert verwendet wird.

clac() verwendet die vier Rechenoperationen „+“, „-“, „*“ und „/“ und kann Einheiten wie Prozentsatz, px, em, rem usw. verwenden und mischen mehrere Einheiten zur Berechnung

Es ist zu beachten, dass

Wenn „0“ als Divisor verwendet wird, löst der HTML-Parser eine Ausnahme aus.

Wenn „+“ und Wenn „-“ verwendet wird, müssen vor und nach Leerzeichen stehen, z. B. calc (100%-15px). Das ist falsch.

Es besteht keine Notwendigkeit, Leerzeichen vor und nach „*“ und „/“ zu lassen, aber Es wird empfohlen, Leerzeichen hinzuzufügen

Nennen Sie zwei Beispiele

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>demo</title>
 6 <style>
 7 .box{
 8     width: 500px;
 9     height: 300px;
10 }
11 .left{
12     width: 250px;
13     background:#ccc;
14     float: left;
15 }
16 .right{
17     width: calc(100% - 250px);
18     float: right;
19     background: #333;
20 }
21 .left,.right{
22     height: 100%;
23 }
24 </style>
25 </head>
26 <body>
27 
28 <p class="box">
29     <p class="left"></p>
30     <p class="right"></p>
31 </p>
32 
33 </body>
34 </html>

Nach dem Login kopieren

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>demo</title>
 6 <style>
 7 .demo{
 8     width: 500px;
 9 }
10 .box{
11     width: 100%;
12     height: 30px;
13     background: #ccc;
14 }
15 input{
16   width: 100%;
17   border:1px solid #333;
18   width: calc(100% - (0px + 1px) * 2);
19 }
20 </style>
21 </head>
22 <body>
23 <p class="demo">
24     <p class="box">
25         <input type="text">
26     </p>
27 </p>
28 </body>
29 </html>

Nach dem Login kopieren

Wenn Sie calc() nicht verwenden

Das Kompatibilitätsproblem ist auch nicht groß

Das Obige ist der gesamte Inhalt dieses Artikels. Weitere verwandte Tutorials finden Sie unter

CSS Basic-Video-Tutorial , CSS3-Video-Tutorial , Bootstrap-Video-Tutorial !

Das obige ist der detaillierte Inhalt vonCSS3 implementiert ein adaptives Layout, das berechnet werden kann – calc(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!