Was wir über absolute und relative CSS-Werte zu sagen haben

Was wir über absolute und relative CSS-Werte zu sagen haben

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
  1. <!DOCTYPE html >   
  2. < html >   
  3.      <Kopf>   
  4.          < Meta   Zeichensatz = "utf-8" >   
  5.          < title > Relative Einschränkungen auf absolute 1 </ title >   
  6.          < Stil >   
  7. .Kasten {
  8. Breite: 500px;
  9. Höhe: 250px;
  10. Hintergrundfarbe: rosa;
  11. Rand: 30px, automatisch 50px;
  12. Zeilenhöhe: 250px;
  13. Textausrichtung: zentriert;
  14. }
  15.   
  16. .box p {
  17. Anzeige: Inline-Block;
  18. vertikale Ausrichtung: Mitte;
  19. Breite: 300px;
  20. Schriftgröße: 16px;
  21. Zeilenhöhe: 1,5;
  22. Textausrichtung: links;
  23. }
  24.   
  25. .box2 p {
  26. Rand links: 30px;
  27. }
  28.   
  29. .box img {
  30. Position: absolut;
  31. links: 0;
  32. oben: 0;
  33. }
  34.   
  35. .box2 {
  36. Position: relativ;
  37. }
  38.   
  39.          </ Stil >   
  40.      </ Kopf >   
  41.      < Textkörper >   
  42.          < div   Klasse = "Box Box1" >   
  43.              < img   Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "Ein Bild"   Stil = "Breite: 100px; Höhe: 150px"   />   
  44.              < 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 >   
  45.          </div>   
  46.   
  47.          < div   Klasse = "Box Box2" >   
  48.              < img   Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "Ein Bild"   Stil = "Breite: 100px; Höhe: 150px"   />   
  49.              < 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 >   
  50.          </div>   
  51.      </ Körper >   
  52. </ 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
  1. <!DOCTYPE html >   
  2. < html >   
  3.      <Kopf>   
  4.          < Meta   Zeichensatz = "utf-8" >   
  5.          < title > Relative Einschränkungen gegenüber absoluten 2 </ title >   
  6.          < Stil >   
  7. .Kasten {
  8. Breite: 500px;
  9. Höhe: 250px;
  10. Hintergrundfarbe: rosa;
  11. Rand: 50px, automatisch 50px;
  12. Überlauf: versteckt;
  13. }
  14.   
  15. .box p {
  16. Rand: 20px 30px 20px 120px;
  17. Textausrichtung: links;
  18. }
  19.   
  20. .box img {
  21. Position: absolut;
  22. Rand links: -30px;
  23. Rand oben: -45px;
  24. }
  25.   
  26. .box2 {
  27. Position: relativ;
  28. }
  29.   
  30.          </ Stil >   
  31.      </ Kopf >   
  32.      < Textkörper >   
  33.          < div   Klasse = "Box Box1" >   
  34.              < img   Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "Ein Bild"   Stil = "Breite: 100px; Höhe: 150px"   />   
  35.              < p > Heute ist der kleine Absolute raus zum Spielen gegangen. </ p >   
  36.              < 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 >   
  37.              < p > Obwohl overflow:hidden rund um das Haus aufgestellt ist, ist dieses mächtige Kind trotzdem rausgerannt. </ p >   
  38.          </div>   
  39.   
  40.          < div   Klasse = "Box Box2" >   
  41.              < img   Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "Ein Bild"   Stil = "Breite: 100px; Höhe: 150px"   />   
  42.              < p > Heute ging Absolute wieder zum Spielen raus und nutzte auch die Fähigkeit zum negativen Margin. </ p >   
  43.              < p > Das Attribut overflow:hidden ist auch rund um das Haus festgelegt, aber diesem mächtigen Kind ist es trotzdem ausgegangen. </ p >   
  44.              < p > Hey, was ist los? Wo ist der Teil meines Körpers außerhalb meines Hauses? </ p >   
  45.              < p > Oh mein Gott, Verwandter, wann bist du gekommen? </ p >   
  46.          </div>   
  47.      </ Körper >   
  48. </ 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
  1. <!DOCTYPE html >   
  2. < html >   
  3.      <Kopf>   
  4.          < Meta   Zeichensatz = "utf-8" >   
  5.          < title > Relative Auswirkungen minimieren </ title >   
  6.          < Stil >   
  7. * {
  8. Rand: 0;
  9. }
  10.   
  11. .wraper {
  12. Breite: 800px;
  13. Rand: 50px automatisch;
  14. Hintergrundfarbe: #ccc;
  15. Rand: 3px durchgehend grün;
  16. }
  17.   
  18. .Kasten {
  19. Breite: 500px;
  20. Rand: 50px automatisch;
  21. Hintergrundfarbe: orange;
  22. Rand: 3px tief schwarz;
  23. }
  24.   
  25. img {
  26. Rand: 1px, durchgehend blau;
  27. Rand: 10px;
  28. }
  29.   
  30. P {
  31. Polsterung links: 10px;
  32. Rand: 10px;
  33. }
  34.   
  35. .absolute {
  36. Position: absolut;
  37. }
  38.   
  39. .box2 .absolute {
  40. Rand links: -3px;
  41. Rand oben: -3px;
  42. }
  43.   
  44. .box3 .absolute {
  45. Rand oben: -3px;
  46. Rand links: 450px;
  47. }
  48.   
  49. .box4 .relative {
  50. Position: relativ;
  51. Rand: 2px durchgehend rot;
  52. }
  53.   
  54. .box4 .absolute {
  55. oben: -10px;
  56. rechts: -10px;
  57. }
  58.          </ Stil >   
  59.      </ Kopf >   
  60.      < Textkörper >   
  61.          < div   Klasse = "Wrapper" >   
  62.              < div   Klasse = "Box Box1" >   
  63.                  < img   Quelle = "http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg"   alt = "Ein Bild"   Stil = "Breite: 50px; Höhe: 30px"   />   
  64.                  < img   Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "Ein Bild"   Stil = "Breite: 100px; Höhe: 150px"   />   
  65.                  < img   Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "Ein Bild"   Stil = "Breite: 100px; Höhe: 150px"   />   
  66.                  < img   Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "Ein Bild"   Stil = "Breite: 100px; Höhe: 150px"   />   
  67.                  < p > So sieht ein normaler Fluss ohne Positionierung aus. </ p >   
  68.                  < p > Nachverfolgung. . . </ p >   
  69.              </div>   
  70.          </div> < !-- Wrapper schließen-->   
  71.          < div   Klasse = "Wrapper" >   
  72.              < div   Klasse = "Box Box2" >   
  73.                  < img   Klasse = "absolut"   Quelle = "http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg"   alt = "Ein Bild"   Stil = "Breite: 50px; Höhe: 30px"   />   
  74.                  < img   Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "Ein Bild"   Stil = "Breite: 100px; Höhe: 150px"   />   
  75.                  < img   Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "Ein Bild"   Stil = "Breite: 100px; Höhe: 150px"   />   
  76.                  < img   Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "Ein Bild"   Stil = "Breite: 100px; Höhe: 150px"   />   
  77.                  < p > Was müssen wir tun, wenn wir das Bild in der oberen linken Ecke des schwarzen Randes positionieren möchten? </ p >   
  78.                  < p > Es ist ganz einfach: absolute Positionierung, kein Versatz, Feinabstimmung mit Rand, fertig! </ p >   
  79.              </div>   
  80.          </div> < !-- Wrapper schließen-->   
  81.          < div   Klasse = "Wrapper" >   
  82.              < div   Klasse = "Box Box3" >   
  83.                  < img   Klasse = "absolut"   Quelle = "http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg"   alt = "Ein Bild"   Stil = "Breite: 50px; Höhe: 30px"   />   
  84.                  < img   Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "Ein Bild"   Stil = "Breite: 100px; Höhe: 150px"   />   
  85.                  < img   Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "Ein Bild"   Stil = "Breite: 100px; Höhe: 150px"   />   
  86.                  < img   Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "Ein Bild"   Stil = "Breite: 100px; Höhe: 150px"   />   
  87.                  < p > Was müssen wir tun, wenn wir das Bild in der oberen rechten Ecke des schwarzen Randes positionieren möchten? </ p >   
  88.                  < p > Die erste Methode besteht darin, wie zuvor die absolute Positionierung zu verwenden und dann den Rand zum Anpassen zu verwenden.
  89. Bei dieser Methode sind einige Gehirnzellen nötig, um zu berechnen, wie viele Pixel verschoben werden müssen. </ p >   
  90.              </div>   
  91.          </div> < !-- Wrapper schließen-->   
  92.          < div   Klasse = "Wrapper" >   
  93.              < div   Klasse = "Box Box4" >   
  94.                  < div   Klasse = "relativ" >   
  95.                      < img   Klasse = "absolut"   Quelle = "http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg"   alt = "Ein Bild"   Stil = "Breite: 50px; Höhe: 30px"   />   
  96.                  </div>   
  97.                  < img   Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "Ein Bild"   Stil = "Breite: 100px; Höhe: 150px"   />   
  98.                  < img   Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "Ein Bild"   Stil = "Breite: 100px; Höhe: 150px"   />   
  99.                  < img   Quelle = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "Ein Bild"   Stil = "Breite: 100px; Höhe: 150px"   />   
  100.                  < p > Die zweite Methode ist die relative + absolute Positionierung, die jeder liebt. </ p >   
  101.                  < 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 >   
  102.                  < 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 >   
  103.                  < p > Relative Auswirkungen minimieren! </ p >   
  104.              </div>   
  105.          </div> < !-- Wrapper schließen-->   
  106.      </ Körper >   
  107. </ 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

<<:  Detaillierte Einführung in die gespeicherten MySQL-Funktionen

>>:  Zusammenfassung mehrerer Implementierungen der Rückkehr zum Anfang in HTML-Seiten

Artikel empfehlen

Eine kurze Diskussion über React Native APP-Updates

Inhaltsverzeichnis App-Update-Prozess Grobes Flus...

Kopieren und Einfügen ist der Feind der Verpackung

Bevor wir über OO, Entwurfsmuster und die vielen o...

So führen Sie das React-Projekt auf dem offiziellen WeChat-Konto aus

Inhaltsverzeichnis 1. Verwenden Sie das „A“-Tag, ...

So begrenzen Sie die Anzahl gleichzeitiger Verbindungsanforderungen in Nginx

Einführung Das Modul, das die Anzahl gleichzeitig...

Ein kurzer Vortrag über MySQL-Pivottabellen

Ich habe eine Produktteiletabelle wie diese: Teil...

MySQL-Variablendeklaration und Analyse gespeicherter Prozeduren

Deklarieren von Variablen Festlegen globaler Vari...

Lösung für Front-End-Browser-Schriftgrößen von weniger als 12 Pixel

Vorwort Als ich kürzlich an einem Projekt arbeite...

MYSQL METADATA LOCK (MDL LOCK) MDL-Sperrproblemanalyse

1. Einleitung MDL-Sperren in MySQL haben schon im...