CSS3中的弹性流体盒模型技术详解(一)

从这篇文章开始，会利用几个篇幅，我将跟大家分享 从CSS1到CSS3都是如何实现页面布局的(当然，所指的范畴是利用CSS技术)。

由于盒子模型技术内容比较多，这篇文章我将着重讲解知识点。

下一篇文章，我会带领大家开发一个兼容 pc端浏览器和 移动端浏览器的弹性布局web界面的实例。希望大家能从中领受到CSS3在布局方面的强大功能。

 

好了，长话短说，现在开始我们的《CSS3中的弹性流体盒模型技术详解》之旅吧！

 

在讲解CSS3中新增的弹性布局属性之前，我们先回顾一下CSS1 和 CSS2中都已经定义了哪些布局方面的属性，这样也会增加我们理解弹性布局。

 

其实我们现在有很多一部分人，你们刚刚接触CSS层叠样式表，或者接触有一段时间了，但是却没有很好的去消化与理解。可能平时你们还一直在使用table，然后通过不断了合并单元格来实现网页布局。希望我今天的这篇文章能彻底改变大家的观念。

 

A：大家可以想一想，在现实生活中，如果我们拿一个盒子来装东西，那么盒子里面的东西是不是跟这个盒子之间会有空隙呢？站在里面物品的角度，则它们之间的间隙距离是不是就可以构成 物品到盒子的外边距。如果站在盒子的角度，则从盒子到物品的距离，是不是可以看出盒子的内边距呢。 当然，盒子还是会有宽和高的。外边距的英文就是margin，内边距的英文是padding，宽是width，高是height。下面是盒子模型的2D图：

CSS 1中定义了盒子模型的基本元素，详细属性请看下表：

 

在CSS2的基础上，CSS3增加了弹性盒模型布局属性，这为我们开发适合现代移动浏览器提供了便利：

 

下面我将对CSS3中新增的弹性盒模型属性做详细介绍，并通过实际coding来带领大家深刻认识弹性布局的威力。

 

首先我们先创建一个html页面，代码如下所示：

 

运行页面，查看一下目前样式的应用效果:

 

 

 

 

box-orient 作用： box-orient属性规定了子元素应该是水平方向还是垂直方向显示。

box-orient 语法： box-orient: horizontal | vertical | inline-axis | block-axis | inherit;

语法解释: horizontal 和 inline-axis 规定了子元素以水平方向显示，两者的显示效果差不多，具体差异不清。vertical 和 block-axis 规定了子元素以垂直方向显示， 两者的显示效果差不多，具体差异不清 。

注意：由于此属性还处于测试当中，所以为了兼容webkit核心的浏览器，需要加上-webkit-前缀，Mozilla核心的浏览器，需要加上前缀-moz-。

    修改样式表文件，添加如下样式代码：

运行demo页面，效果如下：

 

通过以上效果图，大家可以发现div已经变成了水平布局，且宽度是正好包裹内容， css2.1如果需要实现此效果，就得通过float:left;来实现了。

 

我们再次修改代码，实现垂直方向上布局：

运行页面，效果如下图所示:

 

inline-axis 和 block-axis 运行效果分别与horizontal和vertical一样，这里大家可以自行去测试。

inherit属性值是布局方式继承自父元素，如果父元素是水平的，则它也使用水平布局，这个大家可以自行去测试。

box-align 作用：box-align规定了如何在垂直方向上对齐框内的子元素。

box-align 语法：box-align: start | end | center | baseline | stretch;

 

 

注意：由于此属性还处于测试当中，所以为了兼容webkit核心的浏览器，需要加上-webkit-前缀，Mozilla核心的浏览器，需要加上前缀-moz-。

 

示例:

 

    添加start样式，代码如下:

运行效果如下所示：

 

接着，我们让子元素吸附在底部显示，修改代码如下：

此时的运行效果如下所示：

 

center和baseline的功能，大家可以自行测试，这里着重强调一下，如果属性值设为stretch，则它会拉伸填充满父元素，其实也就是未设置box-align时候的样式，所以说如果你要设置stretch，那你直接就别设置box-align属性，因为没意义了。

 

修改属性值为stretch，代码如下：

效果如下：

 

好了，由于篇幅有限，这篇就先讲到这里。