Heim > Artikel > Web-Frontend > Anzeige des CSS3-Boxmodells: Detaillierte Erläuterung der Boxanwendung

Anzeige des CSS3-Boxmodells: Detaillierte Erläuterung der Boxanwendung

黄舟Original: 2017-09-30 09:39:062304Durchsuche

[CSS3-Boxmodellanzeige: Anwendung der Box]

Die neuen CSS3-Attribute

„display:box;“ und „box-flex:value“ sind die neu hinzugefügten Box-Modellattribute von CSS3. Ihr Aussehen kann das Problem lösen, dass wir N mehrere haben Strukturen, Layout-Methode implementiert durch CSS.

Eine klassische Layout-Anwendung ist die vertikale Gleichhöhen-, Horizontal- und Proportionalteilung des Layouts.

Box-Flex-Attribut: Ermöglicht hauptsächlich die Aufteilung des Untercontainers nach bestimmten Regeln entsprechend der Breite des übergeordneten Containers.

Ich werde nichts weiter sagen, posten Sie einfach den Code selbst, um die Wirkung zu sehen.

Html-Struktur:

<body>                      
        <p>魔</p>
        <p>术</p>
        <p>师</p>
</body>

Anwendung: Horizontales Layout

body {
    /*默认水平布局*/
    display: -webkit-box;
    display: -moz-box;
    display: box;
    width: 500px;
    height: 300px;
    margin: 100px auto;
}
p:nth-child(1) {
    -webkit-box-flex: 3;
    -moz-box-flex: 3;
    box-flex: 3;
    background: orange;
}
p:nth-child(2) {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    background: purple;
}
p:nth-child(3) {
    /*-webkit-box-flex: 2;
    -moz-box-flex: 2;
    box-flex: 2;*/
    width: 200px;/*可以写定值*/
    background: green;
}

Anwendung: Vertikales Layout

body {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    /*垂直布局*/
    -webkit-box-orient:vertical;
    -moz-box-orient:vertical;
    box-orient:vertical;
    width: 300px;
    height: 500px;
    margin: 50px auto;
}
p:nth-child(1) {
    -webkit-box-flex: 3;
    -moz-box-flex: 3;
    box-flex: 3;
    background: orange;
}
p:nth-child(2) {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    background: purple;
}
p:nth-child(3) {
    /*-webkit-box-flex: 2;
    -moz-box-flex: 2;
    box-flex: 2;*/
    height: 200px;/*可以写定值*/
    background: green;
}

Das obige ist der detaillierte Inhalt vonAnzeige des CSS3-Boxmodells: Detaillierte Erläuterung der Boxanwendung. 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：Beispielcode für die Implementierung dynamischer Hover-Effekte durch CSSNächster Artikel：Beispielcode für die Implementierung dynamischer Hover-Effekte durch CSS

In Verbindung stehende Artikel

Mehr sehen