Home > Article > Web Front-end > CSS3 box model display: Detailed explanation of the application of box
"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.New attributes of CSS3
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!