Eine Einführung in flüssiges Layout, Elemente und Abmessungen in CSS

Die sogenannte Fluidität ist nicht so einfach wie die scheinbare Breite von 100 % Anzeige, sondern eine Art von Rand/Rahmen/Abstand und der Mechanismus zur automatischen Zuweisung von horizontalem Platz im Inhaltsbereich

So erstellen Sie eine Fluid-Box:

1. width:auto;Box auf Blockebene

2. Formatieren Sie das Breiten-/Höhenfeld

3. Hinweise zur Breite

1. Der Breitenwert Der Wirkungsbereich bezieht sich auf den box-sizing der aktuellen Box. Der Standardwert box-sizing: content-box; entspricht der Breite des Boxinhalts Rand hinzugefügt. box-sizing: border-box;, der Breitenwert entspricht dem Feld border*2+padding*2+content, die Belegung bleibt unverändert und der Inhaltsbereich ändert sich.

2. Die Berechnung des Breiten- und Höhenprozentsatzes absolut positionierter Elemente erfolgt relativ zum Füllfeld, was bedeutet, dass der Füllgrößenwert in die Berechnung einbezogen wird, jedoch nicht absolut Die nach Box berechneten Einstellungen von

3. width:100%; wirken sich auf die „Liquidität“ der Box aus,

4. max-/min - Breite/Höhe

Eigenschaften:

1. Beyond !important; Beyond !important bedeutet, dass die maximale Breite erreicht wird Überschreiben Sie die Breite, auch wenn sie zur Breite hinzugefügt wird! Konflikt zwischen minimaler und maximaler Breite >

1. Inline-Box: reiner Text – anonym inline box; diejenigen, die von Inline-Elementen umschlossen sind, gehören zur Inline-Box Boxen"

Geisterleerknoten:

1. „Ghost Blank Node“ ist ein sehr wichtiges Konzept im Inline-Box-Modell, das sich insbesondere auf die Deklaration im HTML5-Dokument bezieht , verhält sich das gesamte Parsen und Rendern von Inline-Elementen so, als ob vor jedem Zeilenfeld ein „leerer Knoten“ vorhanden wäre. Das Ein „leerer Knoten“ ist immer transparent, nimmt keine Breite ein, kann nicht gesehen werden und kann nicht über Skripte abgerufen werden. Er ist wie ein Geist, aber er existiert und verhält sich wie ein Textknoten. Deshalb nenne ich ihn einen „Geist“. leerer Knoten" .
2. Der einfachste Fall, um die Existenz von Ghost-Blank-Knoten zu beweisen:

   <img src="1.jpg" style="width:480px!important;">
   img { max-width: 256px; }
   
   此刻，图片展示宽度为256px

   Nach dem Login kopieren

   .container {
       min-width: 1400px;
       max-width: 1200px;
   }
   此刻，container展示为至少1400px

   Nach dem Login kopieren