Analyse der CSS3-Positionierung und des Floatings-CSS-Tutorial-php.cn

Analyse der CSS3-Positionierung und des Floatings

不言

Freigeben： 2018-06-20 17:44:14

Original

2582 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich die Konzepte der CSS3-Positionierung und -Floating im Detail vorgestellt und der Beispielcode zur Erläuterung der Verwendung von CSS3-Positionierung und -Floating erläutert.

Dieser Artikel wird mit geteilt Die grundlegenden Konzepte und die Verwendung von CSS3-Positionierung und -Floating dienen als Referenz. Der spezifische Inhalt lautet wie folgt:

1. CSS-Positionierung:

Ändern Sie die Position des Elements auf der Seite

2. CSS-Positionierungsmechanismus:

Normaler Fluss:

Float:

Absolutes Layout:

3. CSS-Positionierungsattribute:

Position bringt das Element in eine statische, relative, absolute oder feste Positionoben/links/rechts/unten Versatz des Elements nach oben/links/rechts/unten

Überlauf legt den Überlauf von fest das Element Was passiert in seinem Bereich

Clip legt die Form der Elementanzeige fest
vertikal-align legt die Ausrichtung der Elementanzeige fest
z-index legt die Stapelreihenfolge des Elements fest/wird zum Festlegen der verwendet Stapelreihenfolge des Elements, je größer, desto mehr Oben/

Positionsattribute

statisch statisch (Standard) relatives relatives Layout (Standard) absolutes absolutes Layout ( nicht mit anderen Tags verknüpft)
behoben (wird beim Scrollen der Seite nicht verschoben)

Beispielcode:

<body>   
    <p id="position1"></p>   
    <p id="position2"></p>   
    <script>   
        for (var i=0;i<100;i++){   
            document.write(i+"<br/>")   
        }   
    </script>   
</body>   
#position1{   
    width: 100px;   
    height: 100px;   
    background-color: blue;   
    position: relative;   
    left: 20px;   
    top: 20px;   
    /*用来设置元素的堆叠顺序，越大越在上方*/
    z-index: 2;   
}#position2{   
    width: 100px;   
    height: 100px;   
    background-color: red;   
    position: relative;   
    left: 30px;   
    top: 10px;   
    z-index: 1;   
}

Nach dem Login kopieren

2. Floating

Verfügbare Werte für das Float-Attribut:
left/right/none/inherit: links oder rechts, nicht schwebend, vom übergeordneten Element geerbt.

* float

1. Brechen Sie nach dem Floaten vom normalen Fluss ab und ordnen Sie ihn im schwebenden Fluss an. Jedes Element wird als Blockelement angezeigt, die Breite und Höhe können eingestellt werden und der Inhalt erweitert die Breite.
2. Wenn viele schwebende Blöcke zusammen sind, ermitteln sie immer den Block, der ihnen am nächsten liegt und sich in derselben schwebenden Richtung befindet. Wenn sie zum Umbrechen gezwungen werden, wird die Höhe des nächstgelegenen Elements als Grundlage verwendet für die neue Position. Zeile

Attribut löschen: Floating-Attribute entfernen (einschließlich geerbter)
Die Bedeutung ist dieselbe wie die entsprechende oben

Situation, in der Floating-Attribute benötigt werden zu löschen:

Nachdem die untergeordnete Beschriftung schwebend ist, kann die Höhe der übergeordneten Beschriftung nicht erweitert werden, daher muss sie gelöscht werden. Für neu hinzugefügte Beschriftungen, falls Sie dies nicht möchten von zuvor schwebenden Elementen betroffen sein, müssen Sie den Float löschen.

1 .clear:both:0; overflow:hidden; inner floats;
3.after pseudo-object: set

.aa:after für das aktuelle Objekt {content:“.“}

.aa {display:inline-block;}
.aa {display:block;}
Finden Sie einen Weg, den Layout-Rendering-Mechanismus von ie6 auszulösen, und lösen Sie viele Fehler durch Glückszoom: 1 kann ausgelöst werden! ! !
inline-block ist für interne Blöcke und externe Zeilen
5.position:absolute;clear float

display

Anzeige: Block wird als Blockelement angezeigt; Anzeige: keiner Der Inhalt verschwindet und nimmt keinen Platz ein Anzeige: Inline wird als Inline-Element angezeigt, was das Problem lösen kann BUG von IE6; Anzeige: Inline-Block ist für interne Blöcke und externe Leitungen.

Sichtbarkeit

: keine

Versteckt, nimmt aber trotzdem Platz ein und beeinflusst das Layout Das Obige ist der gesamte Inhalt dieses Artikels Ich hoffe, es wird für alle hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website! Verwandte Empfehlungen:

Über die Methode zum Löschen von Floating Collapse in CSS

Das obige ist der detaillierte Inhalt vonAnalyse der CSS3-Positionierung und des Floatings. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!