在上一篇文章《CSS3中的弹性流体盒模型技术详解(一)》里,我给大家列出了,从css1css3各版本中盒子模型的基本元素。本篇我会把余下的属性进行详细讲解。


box-pack 作用:用来规定子元素在盒子内的水平空间分配方式

box-pack 语法:box-pack: start | end | center | justify;

start

对于正常方向的框,首个子元素的左边缘吸附在盒子的左边框显示

对于相反方向的框,最后子元素的右边缘吸附在盒子的右边框显示

end

对于正常方向的框,最后子元素的右边缘吸附在盒子的右边框显示

对于相反方向的框,首个子元素的左边缘吸附在盒子的左边框显示

center均等分割剩余空间,一半在首个子元素之前,一半在最后子元素之后
justify首尾子元素分别吸附在左右边框上,中间的子元素分割多余空间

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

示例:

    box-pack:start;

.row{/*设置外围容器样式*/

margin:auto;

border:1px solid black;

width:600px;

height:400px;

margin-top:50px;

display:-webkit-box;/*兼容webkit或mozilla核心浏览器,启用弹性盒子模型*/

display:-moz-box;

display:box;

-webkit-box-orient:horizontal;/*水平方向显示,兼容webkit和mozilla核心浏览器*/

-moz-box-orient:horizontal;

box-orient:horizontal;

-webkit-box-align:center; /*在垂直方向上,居中显示*/

-moz-box-align:center;

box-align:center;

-webkit-box-pack:start; /*在水平方向上,正常情况下,从左侧显示。*/

-moz-box-pack:start;

box-pack:start;

}

    运行效果如下:

clipboard08

当然,如果盒子的顺序是从右到做,则上图就会吸附在右侧边框显示。

    box-pack:end;

.row{/*设置外围容器样式*/

margin:auto;

border:1px solid black;

width:600px;

height:400px;

margin-top:50px;

display:-webkit-box;/*兼容webkit或mozilla核心浏览器,启用弹性盒子模型*/

display:-moz-box;

display:box;

-webkit-box-orient:horizontal;/*水平方向显示,兼容webkit和mozilla核心浏览器*/

-moz-box-orient:horizontal;

box-orient:horizontal;

-webkit-box-align:center; /*在垂直方向上,居中显示*/

-moz-box-align:center;

box-align:center;

-webkit-box-pack: end; /*在水平方向上,正常情况下,吸附在右侧显示。*/

-moz-box-pack: end;

box-pack: end;

}

运行效果如下:

clipboard09

注:如果盒子内的显示顺序是相反方向,则它会吸附在左侧边框显示。

box-pack:center

.row{/*设置外围容器样式*/

margin:auto;

border:1px solid black;

width:600px;

height:400px;

margin-top:50px;

display:-webkit-box;/*兼容webkit或mozilla核心浏览器,启用弹性盒子模型*/

display:-moz-box;

display:box;

-webkit-box-orient:horizontal;/*水平方向显示,兼容webkit和mozilla核心浏览器*/

-moz-box-orient:horizontal;

box-orient:horizontal;

-webkit-box-align:center; /*在垂直方向上,居中显示*/

-moz-box-align:center;

box-align:center;

-webkit-box-pack: center;

-moz-box-pack: center;

box-pack: center;

}

    运行效果如下:

clipboard10

box-pack:justify

.row{/*设置外围容器样式*/

margin:auto;

border:1px solid black;

width:600px;

height:400px;

margin-top:50px;

display:-webkit-box;/*兼容webkit或mozilla核心浏览器,启用弹性盒子模型*/

display:-moz-box;

display:box;

-webkit-box-orient:horizontal;/*水平方向显示,兼容webkit和mozilla核心浏览器*/

-moz-box-orient:horizontal;

box-orient:horizontal;

-webkit-box-align:center; /*在垂直方向上,居中显示*/

-moz-box-align:center;

box-align:center;

-webkit-box-pack: justify; /*在水平方向上,正常情况下,从左侧显示。*/

-moz-box-pack: justify;

box-pack: justify;

}

运行效果如下:

clipboard11


box-direction 作用:box-direction规定了盒子内子元素以什么方向来排列。

box-direction 语法:box-direction: normal | reverse | inherit;

normal以默认方式显示子元素
reverse以相反方向显示子元素
inherit从父容器继承box-direction

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

示例:

    现在我就基于上面的例子,在样式表文件的 .row 里加上box-direction属性,大家一起观察分别观察它们的区别

 以水平方向显示子元素 box-orient:horizontal;
normal

.row{/*设置外围容器样式*/

… /*此处代码省略*/

 

-webkit-box-orient:horizontal;/*水平方向显示,兼容webkit和mozilla核心浏览器*/

-moz-box-orient:horizontal;

box-orient:horizontal;

 

-webkit-box-pack:justify; /*在水平方向上,正常情况下,从左侧显示。*/

-moz-box-pack:justify;

box-pack:justify;

 

-webkit-box-direction:normal; /*以正常方向显示*/

-moz-box-direction:normal;

box-direction:normal;

}

spacer.gif大家可以发现显示顺序还是以前默认的显示顺序,
水平方向,就是从左到右
reverse

.row{/*设置外围容器样式*/

… /*此处代码省略*/

 

-webkit-box-orient:horizontal;/*水平方向显示,兼容webkit和mozilla核心浏览器*/

-moz-box-orient:horizontal;

box-orient:horizontal;

 

-webkit-box-pack:justify; /*在水平方向上,正常情况下,从左侧显示。*/

-moz-box-pack:justify;

box-pack:justify;

 

-webkit-box-direction:reverse; /*以相反方向显示*/

-moz-box-direction: reverse;

box-direction: reverse;

}

spacer.gif应用上box-direction:reverse之后,显示方向颠倒了,
以前是从左到右,现在变成从右到左了。
以垂直方向显示子元素 box-orient: vertical;
normal

.row{/*设置外围容器样式*/

… /*此处代码省略*/

-webkit-box-orient:vertical;/*垂直方向显示,兼容webkit和mozilla核心浏览器*/

-moz-box-orient:vertical;

box-orient:vertical;

-webkit-box-direction: normal;

-moz-box-direction: normal;

box-direction: normal;

}

spacer.gif

大家可以发现,当以垂直方向显示子元素时,

normal属性采用默认的从上到下显示顺序。

reverse

.row{/*设置外围容器样式*/

… /*此处代码省略*/

-webkit-box-orient:vertical;/*垂直方向显示,兼容webkit和mozilla核心浏览器*/

-moz-box-orient:vertical;

box-orient:vertical;

 

-webkit-box-direction:reverse;

-moz-box-direction:reverse;

box-direction:reverse;

}

spacer.gif应用上box-direction:reverse之后,显示方向颠倒了,
以前是从上到下,现在变成从下到