Home > Article > Web Front-end > CSS3 box model display: Detailed explanation of the application of box

CSS3 box model display: Detailed explanation of the application of box

黄舟Original: 2017-09-30 09:39:062305browse

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

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

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

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Example code of how CSS implements hover dynamic effectsNext article：Example code of how CSS implements hover dynamic effects

See more

CSS3 box model display: Detailed explanation of the application of box

[CSS3 box model display: application of box]

Related articles