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