Was sind die CSS-Layoutmethoden?

CSS-Layoutmethoden umfassen: 1. Einspaltiges Layout, normalerweise mit fester Breite und Höhe; 2. Zweispaltiges Layout, implementiert mit Float; 3. Dreispaltiges Layout, mit fester Breite auf beiden Seiten und adaptiver Mitte; . Gemischtes Layout, basierend auf dem einspaltigen Layout, Behalten Sie die Ober- und Fußteile bei. 5. Andere Layouts usw.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Das Wesentliche einer Webseite ist die Position zwischen Blöcken, Blöcken neben Blöcken, in Blöcken verschachtelten Blöcken und übereinander gestapelten Blöcken.

Drei Beziehungen: benachbart, verschachtelt und überlappend.

Im Folgenden werden einige gängige Methoden des Webseitenlayouts vorgestellt.

1. Einspaltiges Layout:

Es wird im Allgemeinen eine feste Breite und Höhe festgelegt, um die Seite automatisch horizontal zu zentrieren prominente Titel auf der Benutzeroberfläche usw.;

        .main{
            width: 200px;
            height: 100px;
            background-color: grey;
            margin: 0 auto;
        }

rrree

2. Zweispaltiges Layout:

Apropos zweispaltiges Layout: Am häufigsten wird es mit Float implementiert. Der Nachteil des Float-Layouts besteht darin, dass es nach dem Floating zu Textumbrüchen und anderen Effekten kommt und das Float rechtzeitig gelöscht werden muss.

Setzen Sie das Links-Links-Floating oder das Links-Rechts-Floating (dies ist die Notwendigkeit, die Breite des übergeordneten Elements zu bestimmen)

Wenn das übergeordnete Element keine Höhe festlegt, müssen Sie overflow:hidden festlegen, um das zu löschen Auswirkung von Floating

Für benachbarte Elemente verwenden Sie: clear: Both;

<p class="main"></p>

    <p class="main">
        <p class="left">left</p>
        <p class="right">right</p>
    </p>

3. Dreispaltiges Layout:

Feste Breite auf beiden Seiten und adaptiv in der Mitte

Zuerst Legen Sie die Breite des übergeordneten Elements fest, und Sie können den Float nach links und rechts festlegen. Stellen Sie dann den Rand in die Mitte ein, um den Abstand anzupassen. Sie können sie auch so einstellen, dass sie nach links schweben, einen Rand festlegen und den Abstand anpassen. Achten Sie auch auf die Auswirkungen von Räumschwimmern!

        .main{
            width: 400px;
            background: red;
            overflow: hidden;
        }

        .left{
            background: yellow;
            float: left;
        }

        .right{
            background: green;
            float: left;
        }

    <p class="main">
        <p class="left">left</p>
        <p class="middle">middle</p>
        <p class="right">right</p>
    </p>

Oder legen Sie das relative Attribut für das übergeordnete Element fest, legen Sie dann das absolute Attribut für das untergeordnete Element fest und positionieren Sie es bzw. passen Sie den Abstand an.

        .main{
            width: 100%;
            background: red;
            overflow: hidden;
        }
        .left{
            background: yellow;
            float: left;
            width: 100px;
        }
        .middle{
             background: rosybrown;
             float: left;
             width: cacl(100%-200px);
         }
        .right{
            background: green;
            float: right;
            width: 100px%;
        }

rrree

4. Gemischtes Layout:

Behalten Sie auf der Grundlage eines einspaltigen Layouts den oberen und unteren Teil bei und verwandeln Sie den Hauptteil in ein zweispaltiges oder dreispaltiges Layout können auf die gleiche Weise Ebene für Ebene aufgeteilt werden. 5. Erweiterungen (z. B. Gleichverteilungslayout usw.)

Das obige ist der detaillierte Inhalt vonWas sind die CSS-Layoutmethoden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!