css3 布局fiex和box-sizing
作者:互联网
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3 布局常用参数</title> <style> .box2{ width:100%;height:100vh; display:flex;/**/ justify-content:center;/*内容居中,简单理解为水平 X */ align-items:center;/*容器居中,简单理解为水平 Y */ } .box{ box-sizing:border-box; /*无论怎么设置,最终大小都是width的100px */ margin:10px; width:100px;height:100px; border: 10px solid red; } </style> </head> <body> <div class="box2"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div> </body> </html>
效果
更多请了解:https://www.runoob.com/w3cnote/flex-grammar.html
标签:css3,fiex,width,100px,box,height,sizing,flex,border 来源: https://www.cnblogs.com/wtcl/p/15646433.html