Flexibles Boxmodell von CSS und CSS3 zur Anpassung der Elementbreite (-höhe)

Flexibles Boxmodell von CSS und CSS3 zur Anpassung der Elementbreite (-höhe)

1. CSS realisiert eine feste Breite links und eine adaptive Breite rechts

1. Positionierung

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <Titel>Adaptiv</Titel>
    <Stil>
        *{
            Polsterung: 0;
            Rand: 0;
        }
        .links{
            Hintergrund: rot;
            Breite: 200px;
            Höhe: 200px;
            Position: absolut;/*Positionierung*/
            links: 0;
            oben: 0;
        }
        .Rechts{
            Hintergrund: blau;
            Höhe: 200px;
            Rand links: 210px;
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="links">
        Feste Breite</div>
    <div Klasse="rechts">
        Anpassungsfähig
</body>
</html>

2. Schwimmen

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <Titel>Adaptiv</Titel>
    <Stil>
        *{
            Polsterung: 0;
            Rand: 0;
        }
        .links{
            Hintergrund: rot;
            Breite: 200px;
            Höhe: 200px;
            schweben: links;/*schweben*/
        }
        .Rechts{
            Hintergrund: blau;
            Höhe: 200px;
            Rand links: 210px;
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="links">
        Feste Breite</div>
    <div Klasse="rechts">
        Anpassungsfähig
</body>
</html>

3. Marge

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <Titel>Adaptiv</Titel>
    <Stil>
        *{
            Polsterung: 0;
            Rand: 0;
        }
        .links{
            Hintergrund: rot;
            Breite: 200px;
            Höhe: 200px;
        }
        .Rechts{
            Hintergrund: blau;
            Höhe: 200px;
            Rand oben: -200px;/*Rand*/
            Rand links: 210px;
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="links">
        Feste Breite</div>
    <div Klasse="rechts">
        Anpassungsfähig
</body>
</html>

2. Das elastische CSS3-Boxmodell realisiert die Anpassung

1. Feste obere und untere Höhe, adaptive mittlere Höhe

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <Titel></Titel>
    <Stil>
        *{
            Rand: 0;
            Polsterung: 0;
        }
        Textkörper,html{
            Höhe: 100%;
        }
        #enthalten{
            Anzeige: Flex;
            flex-direction: column;/*vertikale Spaltenrichtung*/
            Höhe: 100 %;/*Vollbildeffekt: dieses Element und sein übergeordnetes Element und HTML, Texthöhe: 100 %*/
        }
        #Spitze{
           Höhe: 200px;
            Hintergrund: rot;
        }
        #Mitte {
            biegen: 1;
            Hintergrund: blau;
        }
        #unten{
            Höhe: 100px;
            Hintergrund: grün;
        }
    </Stil>
 
</Kopf>
<Text>
<div id="enthalten">
    <div id="top">Hallo</div>
    <div id="center">Hallo</div>
    <div id="bottom">Hallo auch</div>
</div>
</body>
</html>

2. Die linke Breite ist fest und die rechte Breite ist adaptiv

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <Titel></Titel>
    <Stil>
        * {
            Rand: 0;
            Polsterung: 0;
        }
 
        #enthalten {
            Anzeige: flex; /*Das übergeordnete Element setzt dieses Attribut*/
        }
 
        #links {
            Breite: 100px;
            Höhe: 200px;
            Hintergrund: #fff8a8;
            Rand rechts: 10px;
        }
 
        #Rechts {
            flex: 1; /*Anteil/Anzahl der Kopien*/
            Höhe: 200px;
            Hintergrund: #ff9bad;
        }
    </Stil>
</Kopf>
<Text>
<div id="enthalten">
    <div id="links"></div>
    <div id="rechts"></div>
</div>
</body>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<:  Grundkenntnisse im Website-Design: Neulinge lesen bitte dies

>>:  Reparaturlösung für inkonsistenten MySQL GTID-Master und -Slave

Artikel empfehlen

So installieren Sie CentOS8 in VMware12 (Tutorial zur Installation von CentOS8 in einer virtuellen VM-Maschine)

CentOS8 wurde vor ein paar Tagen veröffentlicht. ...

Detaillierte Erläuterung von Beispielen für MySQL-Einzeltabellenabfragevorgänge [Syntax, Einschränkungen, Gruppierung, Aggregation, Filterung, Sortierung usw.]

Dieser Artikel beschreibt die MySQL-Einzeltabelle...

Erläuterung der Docker Compose-Netzwerkeinstellungen

Grundlegende Konzepte Standardmäßig erstellt Comp...

Beispiel für das Erstellen eines virtuellen Hosts basierend auf dem Apache-Port

Apache: Virtuellen Host basierend auf Port erstel...

CSS implementiert einen Popup-Fenstereffekt mit einer Maskenebene, die geschlossen werden kann

Popup-Fenster werden in der tatsächlichen Entwick...

Detaillierte Erläuterung der Wissenspunkte zur asynchronen Programmierung in nodejs

Einführung Weil JavaScript standardmäßig ein Thre...

Ausnahmefehler beim Packen von Webpack-Dateien

Vor dem Verpacken im Webpack müssen wir sicherste...

Detaillierte Analyse der Rolle von HTML-Kommentar-Tags <!--...-->

Wenn wir den Quellcode vieler Websites überprüfen...

Detaillierte Erklärung der Anwendungsfälle von Vue-Listenern

Die erste Möglichkeit besteht darin, jQuery's...

Zwei Möglichkeiten zum Verwalten von Volumes in Docker

Im vorherigen Artikel habe ich die Grundkenntniss...

Einige allgemeine Eigenschaften von CSS

CSS-Hintergrund: background:#00ffee; //Hintergrund...

CSS verwendet das Autoflow-Attribut, um einen Sitzauswahleffekt zu erzielen

1. Autoflow-Attribut: Wenn die Länge und Breite d...

Ubuntu 20.04 – Bestes Konfigurationshandbuch (unverzichtbar für Anfänger)

1. Systemkonfiguration 1. Deaktivieren Sie das Su...

So verstehen Sie das Ref-Attribut von React genau

Inhaltsverzeichnis Überblick 1. Erstellen eines R...

Detaillierte Erklärung der neuen Funktionen von ES9: Asynchrone Iteration

Inhaltsverzeichnis Asynchrones Durchlaufen Asynch...