HTML5 布局基础-盒布局

一、盒布局方式

1、使用自适应窗口的弹性布局：

    在使用盒布局的情况下，可以使用属性box-flex属性，使得盒布局变为弹性盒布局。在样式代码中,针对Firfox浏览器，书写成“-moz-box-flex"的形式，如果使用Safari和Chrome浏览器，书写成“-webkit-box”样式。

#container{display:-moz-box;display:-webkit-box;}
#left-sidebar{width:260px;padding:26px;background-color:orange}
#contents{-moz-box-flex:1;-webkit-box-flex:1;padding:26px;background-color:yellow;min-width:120px;}
#right-sidebar{width:260px;padding:26px;background-color:limegreen;}
#left-sidebar,#contents,#right-sidebar{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}

2、改变元素的显示顺序：

    在使用弹性盒布局的时候，可以通过box-ordinal-group属性来改变各元素的显示顺序，可以在每个元素的样式中加入box-ordinal-group属性，该属性使用一个表示序号的整数属性值，浏览器在显示的时候根据该序号从小到大来显示这些元素。

    Firfox浏览器代码：-moz-box-oridinal-group

    Safari和Chrome浏览器代码：-webkit-box-oridinal-group

3、改变元素的排列方向

    在试用弹性盒布局时候，我们可以很简单地将多个元素的排列方向从水平方向修改为垂直方向，或者从垂直方向修改为水平方向。在CSS3中，使用box-orient来制定多个元素的排列方向；

    Firfox浏览器代码：-moz-box-orient：vertical

    Safari和Chrome浏览器代码：-webkit-box-orient：vertical

4、元素宽带鱼高度的自适应

    在使用盒布局时候，元素的宽度与高度具有自适应性，即元素的宽度与高度可以根据排列方向的改变而改变。