CSS verfügt über ein tiefes Verständnis für das Teilen von width:auto-Nutzungsbeispielen

In diesem Artikel werden hauptsächlich relevante Informationen zum detaillierten Verständnis der Verwendung von width:auto in CSS vorgestellt. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Vorwort

Leute, die meinen letzten Artikel lesen, denken vielleicht, dass ich aus einem Maulwurfshügel Aufsehen errege. Was ist gut an CSS2? Dann werde ich auf das Buch „CSS World“ verweisen, um die spezifischen Punkte und die Auswirkungen auf unseren Code mit allen zu besprechen und zu verstehen.

Zunächst müssen wir wissen, dass der Standardwert für die Breite „Auto“ ist, sodass kein manueller Code geschrieben werden muss, um die Breite automatisch zu steuern.

Vier gängige Breitenausprägungen

Verfügbaren Platz voll ausnutzen

Die Standardblockelemente sind alle 100 % der Breite des übergeordneten Elements, das weiß jeder, aber viele schreiben für Blockelemente eine zusätzliche Breite von 100 %.

Shrink and Wrap

Üblich sind Floating, Inline-Blockelemente und absolute Positionierung. Wir nennen diese Eigenschaft Kapselung.

Auf Minimum verkleinern

Dies tritt am wahrscheinlichsten in Tabellen auf, deren Tabellenlayout auf „Automatisch“ eingestellt ist, wenn wir die Breite und Höhe der Tabellenzellen nicht steuern. Wenn jede Spalte zu klein ist, wird der Text abgeschnitten. Mobiltelefonnummern, englische Wörter, Zahlen usw. können jedoch nicht abgeschnitten werden. Dies kann dazu führen, dass bei jedem Wort nur einige Textspalten angezeigt werden wird in einer neuen Zeile namens min-content angezeigt.

Überschreitet die Containerbreite

Allgemeine Elemente überschreiten die Containeranzeige nicht, es sei denn, die folgenden beiden Situationen treten auf, insbesondere die erste ist ein häufig auftretendes Problem bei der Entwicklung von Junior-Frontends.

1. Der Inhalt erscheint in Englisch oder Zahlen und wird ohne Zeilenumbrüche angezeigt.

2. Der Stil „white-space:nowrap“ ist festgelegt, ohne Zeilenumbrüche.

Für die beiden oben genannten Probleme können Sie jeweils die folgenden Korrekturen vornehmen.

1. word-break:break-all

2. white-space:normal

Andere Eigenschaften

Äußere Größe und Flüssigkeitseigenschaften

Normale Fließbreite

Blockelemente haben standardmäßig Flüssigkeitseigenschaften und erben die Breite von Das übergeordnete Element überschreitet nicht die Breite des übergeordneten Elements. Einige Leute schreiben jedoch immer noch Code wie diesen:

a{
display:block;
width:100%;
}

Oder Code wie diesen, wenn Sie die Abstandsbreite oder ähnliches für die Beschriftung a in der Navigation festlegen Nach dem Nivellieren wird das Etikett tatsächlich zu einem Block und erhält basierend auf der Berechnung automatisch seine eigene Breite, was unnötig ist.

.nav{
width:240px}
.nav-a{
display:block;
width:200px;
margin:0 10px;
padding:9px 10px ;}

Formatierte Breite

Formatierte Breite bezieht sich auf das absolute Positionierungsmodell, einschließlich absoluter Positionierung und fester Position, aber die Referenzpunkte der beiden sind anders. Das ist alles. Standardmäßig ist sein Attribut „inklusive“ und die Boxbreite wird durch die Inhaltsbreite bestimmt. Wenn jedoch (nicht-ersetzende Elemente) links/rechts gleichzeitig festgelegt werden, wird seine Breite relativ zum nächstgelegenen Vorgängerelement berechnet, dessen Positionierungsattribut ist nicht statisch. Seine Breite entspricht der Breite des übergeordneten Elements -links-rechts, andere Eigenschaften bleiben jedoch unverändert. Dies ist in unserem tatsächlichen Layout von großem Nutzen, beispielsweise in dem Layout, das variable Breite und feste Breite in der praktischen CSS-Technologie kombiniert, die ich geteilt habe.

.par{
   width:1000px;
   position:relative;
   }
   //子元素宽度为700px
   .son{
   position:absolute;
   left:100px;
   right:200px;}

Interne Größe und Flüssigkeitseigenschaften

Einschluss

Einschluss bedeutet, dass wenn das Element Wann ist Es ist ein Nicht-Block-Element, seine Breite wird durch den Inhalt bestimmt und Sie sind nur dafür verantwortlich, es nach Bedarf zu erweitern. Da es sich bei der Außenseite definitiv um ein Block-Element handelt, wird es die Containereigenschaften nicht überschreiten.

Der eigentliche Effekt besteht darin, dass weniger Text horizontal zentriert und mehr Text links angezeigt werden kann, ohne dass Skripts erforderlich sind.

.container{
text-align:center;
}
.content{
display:inline-block;
text-align:left;
}

Bevorzugte Mindestbreite

Das einfache Verständnis ist, dass die tatsächliche Breite des Elements von der kleinsten Inhaltseinheit abhängt, diese Priorität ist höher als Breite: 0 hoch. Wenn Sie beispielsweise die Breite auf 0 setzen, der Inhalt jedoch ein chinesisches Zeichen enthält, hat es die Größe eines chinesischen Zeichens. Wenn es sich um ein Wort handelt, wird die Größe eines Wortes angezeigt.

Zu diesem praktischen Zweck können Sie verschiedene einfache Grafiken erstellen, z. B. konkave und konvexe Formen, und dann den Inhalt auf Weiß einstellen.

.ao{
width:0;
display:inline-block;
}
.ao:before{
color:#fff;
content:'love你love';
outline:2px solid #000;
}

Maximale Breite

Die maximale Breite ist die maximale Breite, die ein Element haben kann, oder wenn es dort ist ist viel Inhalt. Es gibt nicht viele reale Szenarien wie dieses.

Hier erweitern wir nur zwei Bildlaufeffekte, einer ist nativer Seiten- oder Dom-Bildlauf, und der andere wird angezeigt, indem die Positionsbeziehung zwischen internen Elementen und Containern wie iscroll festgelegt wird, was eine bessere Wirkung hat.

Verwandte Empfehlungen;

So verwenden Sie Margin 0 Auto in HTML

Legen Sie fest oder geben Sie zurück, ob Audio und Video nach dem Laden in HTML5 gestartet werden Attribut Autoplay abspielen

Detaillierte Erläuterung der Verwendung der Autoload-Methode in Laravel

Das obige ist der detaillierte Inhalt vonCSS verfügt über ein tiefes Verständnis für das Teilen von width:auto-Nutzungsbeispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!