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
用来确定子容器的水平对齐方式。
时间： 2024-10-12 08:20:52