In der Einleitung steht: Absolute sagte: „Relativer, ich möchte dich nicht in meinem Leben sehen!“ Warum? Sie lieben sich offensichtlich sehr und sind unzertrennlich. Welche unbekannte Geschichte ist zwischen ihnen passiert, die absoluten Hass so relativ macht? Folgen Sie mir, um die Antwort auf Ihre Frage zu finden. . . Eine der Einschränkungen von relativ zu absolut Absolut, mit den vier Fähigkeiten oben, rechts, unten und links ist von nun an der Himmel hoch, damit die Vögel fliegen können, und das Meer weit, damit die Fische springen können. Sie können frei gehen, wohin Sie wollen, und das Leben ist so schön. Bis ich eines Tages auf dem Weg nach draußen einen Verwandten traf, der heraussprang und rief: „Ich habe diesen Berg geöffnet und diesen Baum gepflanzt. Wenn Sie hier vorbei wollen, müssen Sie Geld für die Durchreise zurücklassen!“ Dann hat sich unser süßes kleines Kind brav ergeben. Doch der skrupellose Verwandte weigerte sich, das Dokument herauszugeben, auch nachdem er die Vorteile erhalten hatte, und ließ den Absolutismus nicht durchgehen. . . Nun, das ist die Geschichte. . . Ich glaube, das versteht jeder. . . Nun, schreiben wir eine Demo, siehe hier: XML/HTML-CodeInhalt in die Zwischenablage kopieren - <!DOCTYPE html >
- < html >
- <Kopf>
- < Meta Zeichensatz = "utf-8" >
- < title > Relative Einschränkungen auf absolute 1 </ title >
- < Stil >
- .Kasten {
- Breite: 500px;
- Höhe: 250px;
- Hintergrundfarbe: rosa;
- Rand: 30px, automatisch 50px;
- Zeilenhöhe: 250px;
- Textausrichtung: zentriert;
- }
-
- .box p {
- Anzeige: Inline-Block;
- vertikale Ausrichtung: Mitte;
- Breite: 300px;
- Schriftgröße: 16px;
- Zeilenhöhe: 1,5;
- Textausrichtung: links;
- }
-
- .box2 p {
- Rand links: 30px;
- }
-
- .box img {
- Position: absolut;
- links: 0;
- oben: 0;
- }
-
- .box2 {
- Position: relativ;
- }
-
- </ Stil >
- </ Kopf >
- < Textkörper >
- < div Klasse = "Box Box1" >
- < img Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "Ein Bild" Stil = "Breite: 100px; Höhe: 150px" />
- < p > Heute ging Absolute raus zum Spielen, aktivierte die Fähigkeitskombination left:0; top:0; und alles lief reibungslos und er erreichte den Horizont. </ p >
- </div>
-
- < div Klasse = "Box Box2" >
- < img Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "Ein Bild" Stil = "Breite: 100px; Höhe: 150px" />
- < p > Heute ging Absolute wieder zum Spielen raus und aktivierte die Skill-Kombination left:0; top:0;. Das Wetter war jedoch nicht gut und er traf gleich beim Rausgehen auf den bösen Verwandten, also blieb er bei dem Verwandten stehen. </ p >
- </div>
- </ Körper >
- </ html >
Die zweite Einschränkung des Relativen auf das Absolute Letztes Mal haben wir darüber gesprochen, wie der Absolute vom Relativen aufgehalten wurde, als er hinausging, um mit den vier Fähigkeiten oben, rechts, unten und links zu spielen. Diesmal lernte der Freund von Absolute seine Lektion und verwendete diese vier Fähigkeiten nicht mehr. Er verwendete die Fähigkeit „Marge negativer Wert“ und konnte trotzdem rausgehen und spielen. Sehr gut! Obwohl es eine versteckte magische Barriere rund um das Haus gibt, hat unser absolutes Kind sie einfach ignoriert und ist ruhig hindurchgegangen. Applaus! ! ! Aber, aber, aber dieser skrupellose Verwandte ist wieder hier. Glücklicherweise, glücklicherweise, glücklicherweise war es dieses Mal eine Fähigkeit mit negativer Marge, und Absolute Kid konnte die relative Beschränkung erfolgreich durchbrechen und rannte raus. . . Äh, da scheint etwas nicht zu stimmen. . . Warum ist dieser Teil meines Körpers verschwunden, als ich weggelaufen bin? Hier ist die Demo: XML/HTML-CodeInhalt in die Zwischenablage kopieren - <!DOCTYPE html >
- < html >
- <Kopf>
- < Meta Zeichensatz = "utf-8" >
- < title > Relative Einschränkungen gegenüber absoluten 2 </ title >
- < Stil >
- .Kasten {
- Breite: 500px;
- Höhe: 250px;
- Hintergrundfarbe: rosa;
- Rand: 50px, automatisch 50px;
- Überlauf: versteckt;
- }
-
- .box p {
- Rand: 20px 30px 20px 120px;
- Textausrichtung: links;
- }
-
- .box img {
- Position: absolut;
- Rand links: -30px;
- Rand oben: -45px;
- }
-
- .box2 {
- Position: relativ;
- }
-
- </ Stil >
- </ Kopf >
- < Textkörper >
- < div Klasse = "Box Box1" >
- < img Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "Ein Bild" Stil = "Breite: 100px; Höhe: 150px" />
- < p > Heute ist der kleine Absolute raus zum Spielen gegangen. </ p >
- < p > In Anbetracht dessen, dass ich beim letzten Mal beim Einsatz der Fähigkeiten „Oben“, „Rechts“, „Unten“ und „Links“ auf Relatives gestoßen bin, was es mir schwer machte, herauszukommen, habe ich heute die Fähigkeit „Negativer Rand“ eingesetzt. </ p >
- < p > Obwohl overflow:hidden rund um das Haus aufgestellt ist, ist dieses mächtige Kind trotzdem rausgerannt. </ p >
- </div>
-
- < div Klasse = "Box Box2" >
- < img Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "Ein Bild" Stil = "Breite: 100px; Höhe: 150px" />
- < p > Heute ging Absolute wieder zum Spielen raus und nutzte auch die Fähigkeit zum negativen Margin. </ p >
- < p > Das Attribut overflow:hidden ist auch rund um das Haus festgelegt, aber diesem mächtigen Kind ist es trotzdem ausgegangen. </ p >
- < p > Hey, was ist los? Wo ist der Teil meines Körpers außerhalb meines Hauses? </ p >
- < p > Oh mein Gott, Verwandter, wann bist du gekommen? </ p >
- </div>
- </ Körper >
- </ html >
Nach diesen beiden Vorfällen begann Absolute Relative zu hassen. Um es auf eine vertraute Art auszudrücken: „Ich will dich nie wiedersehen!“ Bitte geben Sie absolute Freiheit Absolute Kinder werden mit der Fähigkeit zu fliegen geboren. Sie können mit oben, rechts, unten und links dorthin gelangen, wo sie wollen. Absolute Kinder können zur präzisen Positionierung auch negative Randwerte verwenden und damit spielen, wie sie wollen. Absolute Kids sind so süß, wenn Sie mir nicht glauben, schauen Sie einfach: 
So süß und bezaubernd, warum sollte es eingeschränkt werden? Das Baby sehnt sich nach dem Himmel und der Freiheit! Ah! Ah! Ah! Ah! Absolute sagte: „Verwandter, ich will dich nie wieder sehen!“ Allerdings gibt es viele Ideale, die Realität ist jedoch dürftig . . . Mit Absolutem ist es unmöglich, das zu erreichen, was Sie wollen. Beim Positionieren wird Relatives verwendet, um Absolutes bis zu einem gewissen Grad einzuschränken. Schließlich ist Absolutes so vielseitig, dass es nicht vermieden werden kann. Aber Einschränkungen sind Einschränkungen, es handelt sich hier lediglich um eine Abgrenzung zwischen Relativem und Absolutem, und sie darf sich nicht auf andere Blumen und Pflanzen auswirken. Daher müssen wir bei der Verwendung der relativen + absoluten Positionierung dem Prinzip der Minimierung des relativen Einflusses folgen. Hier ist ein Beispiel: XML/HTML-CodeInhalt in die Zwischenablage kopieren - <!DOCTYPE html >
- < html >
- <Kopf>
- < Meta Zeichensatz = "utf-8" >
- < title > Relative Auswirkungen minimieren </ title >
- < Stil >
- * {
- Rand: 0;
- }
-
- .wraper {
- Breite: 800px;
- Rand: 50px automatisch;
- Hintergrundfarbe: #ccc;
- Rand: 3px durchgehend grün;
- }
-
- .Kasten {
- Breite: 500px;
- Rand: 50px automatisch;
- Hintergrundfarbe: orange;
- Rand: 3px tief schwarz;
- }
-
- img {
- Rand: 1px, durchgehend blau;
- Rand: 10px;
- }
-
- P {
- Polsterung links: 10px;
- Rand: 10px;
- }
-
- .absolute {
- Position: absolut;
- }
-
- .box2 .absolute {
- Rand links: -3px;
- Rand oben: -3px;
- }
-
- .box3 .absolute {
- Rand oben: -3px;
- Rand links: 450px;
- }
-
- .box4 .relative {
- Position: relativ;
- Rand: 2px durchgehend rot;
- }
-
- .box4 .absolute {
- oben: -10px;
- rechts: -10px;
- }
- </ Stil >
- </ Kopf >
- < Textkörper >
- < div Klasse = "Wrapper" >
- < div Klasse = "Box Box1" >
- < img Quelle = "http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg" alt = "Ein Bild" Stil = "Breite: 50px; Höhe: 30px" />
- < img Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "Ein Bild" Stil = "Breite: 100px; Höhe: 150px" />
- < img Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "Ein Bild" Stil = "Breite: 100px; Höhe: 150px" />
- < img Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "Ein Bild" Stil = "Breite: 100px; Höhe: 150px" />
- < p > So sieht ein normaler Fluss ohne Positionierung aus. </ p >
- < p > Nachverfolgung. . . </ p >
- </div>
- </div> < !-- Wrapper
- < div Klasse = "Wrapper" >
- < div Klasse = "Box Box2" >
- < img Klasse = "absolut" Quelle = "http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg" alt = "Ein Bild" Stil = "Breite: 50px; Höhe: 30px" />
- < img Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "Ein Bild" Stil = "Breite: 100px; Höhe: 150px" />
- < img Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "Ein Bild" Stil = "Breite: 100px; Höhe: 150px" />
- < img Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "Ein Bild" Stil = "Breite: 100px; Höhe: 150px" />
- < p > Was müssen wir tun, wenn wir das Bild in der oberen linken Ecke des schwarzen Randes positionieren möchten? </ p >
- < p > Es ist ganz einfach: absolute Positionierung, kein Versatz, Feinabstimmung mit Rand, fertig! </ p >
- </div>
- </div> < !-- Wrapper
- < div Klasse = "Wrapper" >
- < div Klasse = "Box Box3" >
- < img Klasse = "absolut" Quelle = "http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg" alt = "Ein Bild" Stil = "Breite: 50px; Höhe: 30px" />
- < img Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "Ein Bild" Stil = "Breite: 100px; Höhe: 150px" />
- < img Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "Ein Bild" Stil = "Breite: 100px; Höhe: 150px" />
- < img Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "Ein Bild" Stil = "Breite: 100px; Höhe: 150px" />
- < p > Was müssen wir tun, wenn wir das Bild in der oberen rechten Ecke des schwarzen Randes positionieren möchten? </ p >
- < p > Die erste Methode besteht darin, wie zuvor die absolute Positionierung zu verwenden und dann den Rand zum Anpassen zu verwenden.
- Bei dieser Methode sind einige Gehirnzellen nötig, um zu berechnen, wie viele Pixel verschoben werden müssen. </ p >
- </div>
- </div> < !-- Wrapper
- < div Klasse = "Wrapper" >
- < div Klasse = "Box Box4" >
- < div Klasse = "relativ" >
- < img Klasse = "absolut" Quelle = "http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg" alt = "Ein Bild" Stil = "Breite: 50px; Höhe: 30px" />
- </div>
- < img Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "Ein Bild" Stil = "Breite: 100px; Höhe: 150px" />
- < img Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "Ein Bild" Stil = "Breite: 100px; Höhe: 150px" />
- < img Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "Ein Bild" Stil = "Breite: 100px; Höhe: 150px" />
- < p > Die zweite Methode ist die relative + absolute Positionierung, die jeder liebt. </ p >
- < p > Da das Absolute das Relative jedoch so sehr hasst, sollte das Relative es einfach schikanieren und darauf achten, andere Blumen und Pflanzen nicht zu beeinträchtigen. </ p >
- < p > Fügen Sie insbesondere dem Bild, das positioniert werden muss, eine Div-Ebene hinzu, legen Sie sie relativ fest und lassen Sie diese relative Ebene nur die Elemente beeinflussen, die absolut positioniert werden müssen. </ p >
- < p > Relative Auswirkungen minimieren! </ p >
- </div>
- </div> < !-- Wrapper
- </ Körper >
- </ html >
Das Obige ist alles, was ich zu absoluten und relativen CSS-Werten zu sagen habe. Ich hoffe, es kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden. Original-URL: http://www.cnblogs.com/cc156676/archive/2016/07/20/5688949.html |