首页 > 代码库 > CSS3.0盒子模型：display:-webkit-box
CSS3.0盒子模型：display:-webkit-box
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>css3盒子模型</title> 5 <style> 6 .box3{ 7 width: 300px; 8 height: 100px; 9 /*设置css3盒子模型的父类*/10 display: -webkit-box;11 display: -moz-box;12 display: box;13 14 background-color: #1d89cf;15 }16 .box3>section{17 /*设置css3盒子模型的子类，将他们平分*/18 -webkit-box-flex: 1;19 -moz-box-flex: 1;20 box-flex: 1;21 22 border: 1px solid #fff;23 text-align: center;24 }25 </style>26 </head>27 28 <body>29 30 <div class="box3">31 <section>1</section>32 <section>2</section>33 <section>3</section>34 </div>35 36 </body>37 </html>
上面就是css3盒子模型最基本的一个代码。
display:-*-box; 是定义盒子模型的父容器。
-*-box-flex: 1; 是定义盒子模型的子容器在父容器中的比例。
如是1,2,1，意思就是section1、2、3分别占25%，50%，25%。
而-*-box有如下属性：
-*-box-orient: horizontal | vertical | inline-axis | block-axis | inherit
用来确定父容器中的子容器的布局是水平布局还是垂直布局。（默认水平）
-*-box-direction: normal | reverse | inherit
用来确定子容器的排列顺序，如是reverse，就是将123在页面中变成了321的排列
-*-box-align:start（顶对齐） | end（底对齐） | center（居中对齐） | baseline | stretch（拉伸，拉伸到和父容器等高）
用来确定子容器的垂直对齐方式。
-*-box-pack: start | end | center | justify
用来确定子容器的水平对齐方式。
CSS3.0盒子模型：display:-webkit-box
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。