Heim > Artikel > Web-Frontend > Einführung in die CSS3-Positionierung und -Floating

Einführung in die CSS3-Positionierung und -Floating

不言Original: 2018-07-02 10:51:461620Durchsuche

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

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:

Analyse von CSS-Float und -Position

Verwenden Sie CSS3, um eine Liste ohne Ober- und Unterkante festzulegen Methoden zum Trennen von Linien

Das obige ist der detaillierte Inhalt vonEinführung in die CSS3-Positionierung und -Floating. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php css css3 Static Float 继承堆对象 display position overflow bug zoom

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：Analyse des Renderns von Transformationsmodellen in CSS3Nächster Artikel：Analyse des Renderns von Transformationsmodellen in CSS3

In Verbindung stehende Artikel

Mehr sehen