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.
Der Inhalt erscheint in Englisch oder Zahlen und wird ohne Zeilenumbrüche angezeigt.
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.
word-break:break-all
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
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!
