Heim > Artikel > Web-Frontend > CSS-Struktur und -Layout

CSS-Struktur und -Layout

高洛峰Original: 2017-02-18 14:55:271269Durchsuche

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;    
}

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;
}

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;
    }
}

: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{
    /*当列表中至少包含四项时，命中包括该项之后的所有列表项*/
}

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>

CSS-Stil:

footer{
    background: #333;
}

.wrapper{
    max-width: 900px;
    margin: 1em auto;
    height: 200px;
}

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);
 }

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>

CSS-Code:

.main{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

CSS结构与布局

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 .

CSS结构与布局

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;
}

CSS结构与布局

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*/
    }
}

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>

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())

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwandte Methoden der Klassen- und Stileinstellungen in VueNächster Artikel：Verwandte Methoden der Klassen- und Stileinstellungen in Vue

In Verbindung stehende Artikel

Mehr sehen