[CSS3 box model display: application of box]

New attributes of CSS3

"display:box;" and "box-flex:value" are newly added box model attributes of CSS3. Its appearance can solve the problem of N-multiple structures, Layout method implemented by css.

A classic layout application is the vertical equal height, horizontal division, and proportional division of the layout.

box-flex attribute: mainly allows the sub-container to be divided according to certain rules according to the width of the parent container.

I won’t say anything else, just post the code yourself to see the effect.

Html structure:

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

Copy after login

Application: Horizontal 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;
}

Copy after login

Application: Vertical 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;
}

Copy after login

The above is the detailed content of CSS3 box model display: Detailed explanation of the application of box. For more information, please follow other related articles on the PHP Chinese website!