css3中webkit-box的用法

最新推荐文章于 2023-08-16 09:44:39 发布

iteye_15118

最新推荐文章于 2023-08-16 09:44:39 发布

阅读量102

点赞数

分类专栏：移动开发

本文链接：https://blog.csdn.net/iteye_15118/article/details/82600046

版权

移动开发专栏收录该内容

21 篇文章 0 订阅

订阅专栏

webkit-box

1、之前要实现横列的web布局，通常就是float或者display：inline-block; 但是都不能做到真正的流体布局。至少width要自己去算百分比。
2.flexible box 就可以实现真正意义上的流体布局。只要给出相应属性，浏览器会帮我们做额外的计算。

提供的关于盒模型的几个属性：

box-orient           子元素排列 vertical or horizontal
box-flex             兄弟元素之间比例，仅作一个系数
box-align            box 排列
box-direction        box 方向
box-flex-group       以组为单位的流体系数
box-lines
box-ordinal-group    以组为单位的子元素排列方向
box-pack以下是关于flexible box的几个实例
1、三列自适应布局，且有固定margin：

<!DOCTYPE html><html><style>
.wrap {
display: -webkit-box;
-webkit-box-orient: horizontal;
}
.child {
min-height: 200px;
border: 2px solid #666;
-webkit-box-flex: 1;
margin: 10px;
font-size: 100px;
font-weight: bold;
font-family: Georgia;
-webkit-box-align: center;
}
</style><div><div>1</div><div>2</div><div>3</div></div></html>

2、当一列定宽，其余两列分配不同比例亦可(三列布局，一列定宽，其余两列按1：2的比例自适应)：

<!DOCTYPE html><html><meta charset=”utf-8″ /><style>
.wrap {
display: -webkit-box;
-webkit-box-orient: horizontal;
}
.child {
min-height: 200px;
border: 2px solid #666;
margin: 10px;
font-size: 40px;
font-weight: bold;
font-family: Georgia;
-webkit-box-align: center;
}
.w200 {width: 200px}
.flex1 {-webkit-box-flex: 1}
.flex2 {-webkit-box-flex: 2}
</style><div><div>200px</div><div>比例1</div><div>比例2</div></div></html>
3、下面是一个常见的web page 的基本布局：

<!DOCTYPE html><html><meta charset=”utf-8″ /><style>
header, footer, section {
border: 10px solid #333;
font-family: Georgia;
font-size: 40px;
text-align: center;
margin: 10px;
}
#doc {
width: 80%;
min-width: 600px;
height: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
margin: 0 auto;
}
header,
footer {
min-height: 100px;
-webkit-box-flex: 1;
}
#content {
min-height: 400px;
display: -webkit-box;
-webkit-box-orient: horizontal;
}

.w200 {width: 200px}
.flex1 {-webkit-box-flex: 1}
.flex2 {-webkit-box-flex: 2}
.flex3 {-webkit-box-flex: 3}
</style><div id=”doc”><header>Header</header><div id=”content”><section>定宽200</section><section>比例3</section><section>比例1</section></div><footer>Footer</footer></div></html>

下面是一个常见的web page 的基本布局

 
             <style> 
            
             header, footer, section { 
            
             border: 10px solid  
             #333; 
            
             font-family: Georgia; 
            
             font-size: 40px; 
            
             text-align: center; 
            
             margin: 10px; 
            
             } 
            
             #doc { 
            
             width: 80%; 
            
             min-width: 600px; 
            
             height: 100%; 
            
             display: -webkit-box;  
            
             -webkit-box-orient: vertical; 
            
             margin: 0 auto; 
            
             } 
            
             header, 
            
             footer { 
            
             min-height: 100px; 
            
             -webkit-box-flex: 1; 
            
             } 
            
             #content { 
            
             min-height: 400px; 
            
             display: -webkit-box; 
            
             -webkit-box-orient: horizontal; 
            
             } 
            
             .w200 {width: 200px} 
            
             .flex1 {-webkit-box-flex: 1} 
            
             .flex2 {-webkit-box-flex: 2} 
            
             .flex3 {-webkit-box-flex: 3} 
            
             </style> 
            
             <div id= 
             "doc" 
             > 
            
             <header>Header</header> 
            
             <div id= 
             "content" 
             > 
            
             <section  
             class 
             = 
             "w200" 
             >定宽200</section> 
            
             <section  
             class 
             = 
             "flex3" 
             >比例3</section> 
            
             <section  
             class 
             = 
             "flex1" 
             >比例1</section> 
            
             </div> 
            
             <footer>Footer</footer> 
            
             </div>