Heim > Artikel > Web-Frontend > Position des CSS-Float-Box-Modells

Position des CSS-Float-Box-Modells

php中世界最好的语言Original: 2018-03-19 11:54:202412Durchsuche

Dieses Mal bringe ich Ihnen die Box-Modellpositionvon CSS-Float. Was sind die Vorsichtsmaßnahmen für die Verwendung der Box-Modellposition von CSS-Float? ein Blick.

Attribute:

float floating

Der schwebende Inhalt wird in p umschlossen und die Breite und Höhe werden auf festgelegt p

Löschen Float löschen .

Box-Größe

　Box-Modell im Standardmodus content-box: (Standardattribut)

Polsterung und Rand sind in der definierten Breite und Höhe nicht enthalten. Die tatsächliche Breite des Objekts entspricht der Summe aus eingestelltem Breitenwert, Rand und Polsterung, also (Elementbreite = Breite + Rand + Polsterung)

Box-Modell im seltsamen Modus Border-Box:

Polsterung und Rand sind innerhalb der definierten Breite und Höhe enthalten. Die tatsächliche Breite des Objekts entspricht dem eingestellten Breitenwert. Auch wenn Rand und Abstand definiert sind, wird die tatsächliche Breite des Objekts nicht geändert, d. h. (Elementbreite = Breite)

Andere Attribute:

　line-height Zeilenhöhe, wird innerhalb einer Zeile verwendet.

Überlauf: versteckt Der überschüssige Teil wird ausgeblendet.

Anzeige: Block-Inline-Inline-Block (Dieses Element wird durch Blockelement Zeilenelement Inline-Blockelement ersetzt)

Z-Index: kaskadierende Reihenfolge. Die größere Zahl steht oben

Weitere Wissenspunkte:

Kompatibilität: Legen Sie die Breite und Höhe des äußersten Etiketts und den Prozentsatz im Inneren fest.

Box-Modell: Von innen nach außen sind es Inhalt (HTML), Abstand, Rahmen und Rand.

Positionierung:

Position:

Fix Absolute Positionierung (relative Fensterpositionierung)

Die relative Positionierung hat eine eigene Position zur Feinabstimmung (besetzt die Position vor der Feinabstimmung)

absolute Positionierung (Die höchste Position relativ zum nächstgelegenen übergeordneten Tag mit Position ist Körper)

<head><style>#a{
    width:400px;
    height:200px;
    border:1px solid red;
    position:relative;
    }
    #b{
        width:100px;
        height:50px;
        border:1px solid green;
        position:absolute;
        bottom:0;
        right:0;
        }
    #c{
        width:100px;
        height:50px;
        background:green;
        position:relative;
        top:280px;
        left:210px;
        z-index:1;
        }#z{
    width:400px;
    height:200px;
    border:1px solid red;
    margin-top:5px;
    }
    #x{
        width:100px;
        height:50px;
        background:red;
        position:absolute;
        top:280px;
        left:140px;
        }
    #y{
        width:100px;
        height:50px;
        border:1px solid green;
        position:relative;
        top:110px;
        left:430px;
        }</style></head><body><!--a边框--><p id="a">
    a    <p id="b">b</p>
    <p id="c">c</p></p><!--z边框--><p id="z">
    z    <p id="x">x</p>
    <p id="y">y</p></p></body>

Reduzieren und positionieren

, um das zu erreichen Wirkung

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall hier gelesen haben Artikel, bitte achten Sie auf PHP, um mehr Spannung zu erhalten. Weitere verwandte Artikel auf der chinesischen Website!

Empfohlene Lektüre:

Flex-Layout verwenden

Was sind die Spezifikationen für die Front-End-Einzelcodierung?

Es gibt mehrere Möglichkeiten, die Auswirkungen des Schwebens auf der Seite zu beseitigen

Das obige ist der detaillierte Inhalt vonPosition des CSS-Float-Box-Modells. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen 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：Detaillierte Erläuterung der Beispiele für die Kompilierung von PHP-ModulenNächster Artikel：Detaillierte Erläuterung der Beispiele für die Kompilierung von PHP-Modulen

In Verbindung stehende Artikel

Mehr sehen