CSS3弹性盒模型开发笔记（一）

    <div id="box1"><img src="images/web1_01.gif" /></div>  

    <div id="box2"><img src="images/web1_02.gif" /></div>  

    <div id="box3"><img src="images/web1_03.gif" /></div>  

    <div id="box4"><img src="images/web1_04.gif" /></div>  

</div>  

CSS3代码：

CSS Code复制内容到剪贴板

<style type="text/css">   

body {   

    margin:0;   

    padding:0;   

    text-align:center;   

    background:#d9bfe8;   

}   

#box {   

    margin:auto;   

    text-align:left;   

    width:988px;   

}   

/*定义盒形显示及盒内元素垂直显示*/  

#box {   

    display : -moz-box;   

    display : -webkit-box;   

    display : box;   

    box-orient:vertical;   

    -moz-box-orient:vertical;   

    -webkit-box-orient:vertical;   

}   

/*根据网页内容的现实需要，借助弹性盒模型调整各个板块的显示顺序*/  

#box1 {/*设置第一个元素显示在第二个位置*/  

    -moz-box-ordinal-group : 2;/*兼容Mozilla Gecko引擎*/  

    -webkit-box-ordinal-group : 2;/*兼容Webkit引擎*/  

    box-ordinal-group : 2;/*标准用法*/  

}   

#box2 {/*设置第二个元素显示在第三个位置*/  

    -moz-box-ordinal-group : 3;/*兼容Mozilla Gecko引擎*/  

    -webkit-box-ordinal-group : 3;/*兼容Webkit引擎*/  

    box-ordinal-group : 3;/*标准用法*/  

}   

#box3 {/*设置第三个元素显示在第一个位置*/  

    -moz-box-ordinal-group : 1;/*兼容Mozilla Gecko引擎*/  

    -webkit-box-ordinal-group : 1;/*兼容Webkit引擎*/  

    box-ordinal-group : 1;/*标准用法*/  

}   

#box4 {/*设置第四个元素显示在第四个位置*/  

    -moz-box-ordinal-group : 4;/*兼容Mozilla Gecko引擎*/  

    -webkit-box-ordinal-group : 4;/*兼容Webkit引擎*/  

    box-ordinal-group : 4;/*标准用法*/  

}   

</style>   

演示效果：

以上就是关于CSS3弹性盒模型基础开发知识总结，希望对大家认识CSS3弹性盒模型有所帮助。

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!