[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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!