0x00 min-content width adaptiv
CSS3 neuer Breitenattributwert width:min-content kann den Breitenwert des Containers auf die größte unzerbrechliche Zeile im Container festlegen Die Breite (das breiteste Wort-, Bild- oder Boxelement mit fester Breite)
figure{
width:min-content;
margin: auto;
}Nach dem Login kopieren
0x01 Stile entsprechend der Anzahl der Geschwisterelemente festlegen
Wir wissen, dass der Pseudoelementselektor : nur -child, tatsächlich kann es äquivalent sein zu: erstes Kind: letztes Kind, das heißt, es ist gleichzeitig das erste und letzte Element, also ist es logischerweise eindeutig. Und :last-child ist auch eine Abkürzung für :nth-last-child(1).
Dann denken wir über eine Frage nach: Was stellt li:first-chidl:nth-last-child(4) dar? Das Ergebnis ist _das erste Element in einer Liste mit genau vier Listenelementen_, ok, kombiniert mit Mit dem Geschwister-Selektor können Sie folgendes Ziel erreichen: Wenn es genau vier Listenelemente enthält, klicken Sie auf jedes Element
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
background: red;
}Nach dem Login kopieren
Kombiniert mit SASS, vereinfachen und wiederverwenden
/*定义混合器*/
@mixin n-items($n){
&:first-child:nth-last-child(#{$n}),
&:first-child:nth-last-child(#{$n}) ~ &{
@content;
}
}
/*调用*/
li {
@include n-items(4){
/*属性与值写在这里*/
background: red;
}
}Nach dem Login kopieren
:nth-child()
Die Stärke von nth-child() besteht darin, dass es einen Ausdruck in der Form an+b akzeptiert, dann kann es natürlich mit seiner Variante nth-child( n+4) werden alle untergeordneten Elemente außer dem 1., 2. und 3. untergeordneten Element ausgewählt.
ul li:first-child:nth-last-child(n+4),
ul li:first-child:nth-last-child(n+4) ~ li{
/*当列表中至少包含四项时，命中包括该项之后的所有列表项*/
}Nach dem Login kopieren
Natürlich hängt das Gameplay von :nth-child() darüber hinaus völlig von Ihrer Vorstellungskraft ab.
0x02 calc
Manchmal, wenn wir ein Layout mit einer Hintergrundbreite, die den Bildschirm ausfüllt, und einer festen Inhaltsbreite implementieren müssen, entwerfen wir die DOM-Struktur vielleicht so
<footer>
<p class="wrapper">
</p>
</footer>
Nach dem Login kopieren
CSS-Stil:
footer{
background: #333;
}
.wrapper{
max-width: 900px;
margin: 1em auto;
height: 200px;
}Nach dem Login kopieren
Nach der Verwendung der calc()-Methode müssen wir nicht mehr so mühsam sein, um dies zu erreichen:
footer{
background:#333;
padding:1em calc(50% - 50px);
}Nach dem Login kopieren
Die Verwendung von clac() führt einfache arithmetische Operationen in CSS aus, um die DOM-Struktur ohne jegliche Redundanz sehr prägnant zu gestalten. Natürlich sind die Mängel auch hier offensichtlich, wenn das übergeordnete Element des Fußzeilenelements 900 überschreitet px.
Der Prozentsatz in calc() wird basierend auf seinem übergeordneten Element analysiert
Aber zum ersten Mal haben wir etwas über den Zaubertrick von cacl() in CSS3 gelernt.
0x03 Vertikale Zentrierung
Absolute positionierungsbasierte Lösung
Es gibt ein sehr häufiges Phänomen in CSS, und die eigentliche Lösung kommt oft dort, wo wir sie am wenigsten erwarten. Sie können beispielsweise die Attribute „positon:absolute“ und „transform:translate()“ kombinieren, um eine vertikale Zentrierung zu erreichen
Da der Prozentsatz in der Transformationsfunktion „translate()“ basierend auf der Breite und Höhe des Elements selbst konvertiert wird, So können Sie die Abhängigkeit von festen Größen vollständig beseitigen.
Beispiel: DOM-Struktur
<body>
<p class="main">
<h1>Am i center?</h1>
<p>Center me ,please!</p>
</p>
</body>
Nach dem Login kopieren
CSS-Code:
.main{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}Nach dem Login kopieren
Diese Methode weist jedoch auch Mängel auf:
1. In einigen Browsern kann es zu einer verschwommenen Anzeige kommen, da das Element möglicherweise auf einem halben Pixel platziert ist.
2. Wenn eine absolute Positionierung nicht geeignet ist. Und die absolute Positionierung wirkt sich zu stark auf das gesamte Layout aus.
FlexBox-basierte Lösung
Es besteht kein Zweifel, dass dies derzeit die beste Lösung ist. Darüber hinaus ist die moderne Browserunterstützung für FlexBox bereits recht hoch.
Die Verwendung von margin:auto für Elemente, die auf FlexBox-Containern basieren, kann nicht nur die horizontale, sondern auch die vertikale Richtung zentrieren, selbst wenn keine Breite angegeben ist, da die diesem Element zugewiesene Breite gleich max-content ist .
Ein weiterer Vorteil von FlexBox ist, dass der Text auch vertikal zentriert werden kann. Fügen Sie einfach align-items:center und justify-content:center zu den Elementen hinzu, indem Sie display:flex verwenden .
.main{
background: deeppink;
width: 50%;
height: 50%;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}Nach dem Login kopieren
0x04 Fußzeile, die unten klebt
Manchmal gehen wir davon aus, dass die Höhe der Kopf- und Fußzeile durch ihre internen Faktoren bestimmt wird. und Die Höhe des Inhaltsblocks kann automatisch verkleinert werden, um den gesamten verfügbaren Platz auszufüllen. Auch dies ist mit FlexBox ganz einfach.
body {
min-height: 100vh;
display:flex;
flex-flow: column;
header{
/*heaer style*/
}
.main{
flex:1;
}
footer{
/*footer style*/
}
}Nach dem Login kopieren
Wir geben dem Körper eine Höhe von min-height:100vh, sodass er mindestens die Höhe des gesamten Ansichtsfensters einnimmt, und geben dann dem Hauptteil einen Flex-Wert größer als 0.
Frage: Was passiert, wenn die Fußzeile am unteren Bildschirmrand fixiert ist? Wie kann sichergestellt werden, dass die Fußzeile den Inhaltsbereich nicht verdeckt, wenn die Seite bis zum Ende gescrollt wird?
Für dieses Problem ist es eine rein persönliche Idee. Sie können eine p#_footer nach der Footer hinzufügen.
Die DOM-Struktur sieht derzeit wie folgt aus:
<body>
<header><header>
<p class="main"></p>
<footer></footer>
<p id="_footer"></p>
</body>
Nach dem Login kopieren
Was p#_footer betrifft, besteht keine Notwendigkeit, ihm Inhalt und Stil hinzuzufügen, solange seine Höhe gleich ist gleich der Höhe der Fußzeile. Das war's, und das kann ganz einfach mit jQuery erledigt werden.
$('#_footer').height($('footer').height())Nach dem Login kopieren
Auf diese Weise müssen Sie sich keine Gedanken über das reaktionsfähige Layout machen. Obwohl es ein bisschen knifflig ist, ist es eine perfekte Lösung!
Weitere Artikel zum Thema CSS-Struktur und -Layout finden Sie auf der chinesischen PHP-Website!
