欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS3中的弹性流体盒模型技术详解(二) 博客分类: div+csscss3 csscss3弹性布局自适应布局盒子模型

程序员文章站 2024-03-25 17:59:28
...
在上一篇文章《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;
}
    运行效果如下:
CSS3中的弹性流体盒模型技术详解(二)
            
    
    博客分类: div+csscss3 csscss3弹性布局自适应布局盒子模型
 
当然,如果盒子的顺序是从右到做,则上图就会吸附在右侧边框显示。
 
    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;
}
运行效果如下:
CSS3中的弹性流体盒模型技术详解(二)
            
    
    博客分类: div+csscss3 csscss3弹性布局自适应布局盒子模型
 
注:如果盒子内的显示顺序是相反方向,则它会吸附在左侧边框显示。
 
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;
}
    运行效果如下:
CSS3中的弹性流体盒模型技术详解(二)
            
    
    博客分类: div+csscss3 csscss3弹性布局自适应布局盒子模型
 
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;
}
运行效果如下:
 
CSS3中的弹性流体盒模型技术详解(二)
            
    
    博客分类: div+csscss3 csscss3弹性布局自适应布局盒子模型
 
 

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;
}
大家可以发现显示顺序还是以前默认的显示顺序,
水平方向,就是从左到右
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;
}
应用上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;
}
大家可以发现,当以垂直方向显示子元素时,
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;
}
应用上box-direction:reverse之后,显示方向颠倒了,
以前是从上到下,现在变成从下到上了。
 
从上面的比较,大家可以看出,box-direction是根据当前子元素的显示方向(水平或垂直)来起作用的
 
box-direction:inherit 这个大家可以私下自行测试。
 

box-flex 作用:box-flex属性规定了盒子内的子元素是否可以自动伸缩其尺寸,只要盒子内对应显示方向上有剩余空间,可伸缩元素就会扩展来填充这些空间。
box-flex 语法:box-flex: value。
 
value 元素的可伸缩值,柔性是相对,例如 box-flex:2.0 的子元素伸缩尺寸两倍于 box-flex:1.0的子元素
注意:由于此属性还处于测试当中,所以为了兼容webkit核心的浏览器,需要加上-webkit-前缀,Mozilla核心的浏览器,需要加上前缀-moz-
 
示例:
 
    现在我们就来对box-flex的作用通过示例来证明一下:
 
对 sidebar 应用样式
.sidebar{/*给侧边栏添加样式*/
background-color:#00B366;
 
/*将应用了此样式的元素都设置为可伸缩元素*/
-webkit-box-flex:1.0; 
-moz-box-flex:1.0;
box-flex:1.0;
}
 
.middle{/*给中间区域添加样式*/
background-color:#80C8FE;
}
 
.article{/*给主体内容添加样式*/
background-color:#FEB380;
}
从显示效果来看, 这正好证明了, 设置了box-flex的元素是有弹性的,
且只要盒子内对应显示方向上有剩余空间, 可伸缩元素就会扩展来填充这些空间。
对sidebar和middle应用样式
.sidebar{/*给侧边栏添加样式*/
background-color:#00B366;
 
 /*将应用了此样式的元素都设置为可伸缩元素*/
-webkit-box-flex:1.0;
-moz-box-flex:1.0;
box-flex:1.0;
}
 
.middle{/*给中间区域添加样式*/
background-color:#80C8FE;
 
/*将应用了此样式的元素都设置为可伸缩元素*/
-webkit-box-flex:2.0; 
-moz-box-flex:2.0;
box-flex:2.0;
}
 
.article{/*给主体内容添加样式*/
background-color:#FEB380;
}
从显示效果可以看出,当 .middle 样式设置了box-flex:2.0时,
应用了 .middle 样式的元素也变成了弹性元素,且伸缩尺寸是
box-flex:1.0的两倍。
对sidebar,middle和article应用样式
.sidebar{/*给侧边栏添加样式*/
background-color:#00B366;
 
-webkit-box-flex: 1.0
-moz-box-flex:1.0;
box-flex:1.0;
}
 
.middle{/*给中间区域添加样式*/
background-color:#80C8FE;
 
-webkit-box-flex:2.0
-moz-box-flex:2.0;
box-flex:2.0;
}
 
.article{/*给主体内容添加样式*/
background-color:#FEB380;
 
-webkit-box-flex:3.0
-moz-box-flex:3.0;
box-flex:3.0;
}
 这里大家得注意一下,大家可能会认为,.article应该占1/2的空间的,
怎么看.sidebar和.middle加起来都比.article大的啊
 
其实这里分配的原则是, 剩余空间按照对应比率来分配。
 
对sidebar来说,伸缩的空间 = 总剩余空间 *(1.0/6.0);
对middle来说,伸缩的空间 = 总剩余空间*(2.0/6.0) ;
对article来说,伸缩的空间 = 总剩余空间 * (3.0/6.0);
 

box-flex-group 作用: 一组设置了box-flex-group元素当中,值最小的,占用全部剩余空间;值最小且相等,则平均分配剩余空间。

 
.sidebar{/*给侧边栏添加样式*/
background-color:#00B366;
 
-webkit-box-flex:1.0
-moz-box-flex:1.0;
box-flex:1.0;
 
-webkit-box-flex-group:1; 
-moz-box-flex-group:1;
box-flex-group:1;
}
 
.middle{/*给中间区域添加样式*/
background-color:#80C8FE;
 
-webkit-box-flex:2.0; 
-moz-box-flex:2.0;
box-flex:2.0;
 
-webkit-box-flex-group:2; 
-moz-box-flex-group:2;
box-flex-group:2;
}
 
.article{/*给主体内容添加样式*/
background-color:#FEB380;
 
-webkit-box-flex:2.0
-moz-box-flex:2.0;
box-flex:2.0;
 
-webkit-box-flex-group:1; 
-moz-box-flex-group:1;
box-flex-group:1;
}
大家从效果图应该可以看出, 如果box-flex-group的值较大,则它只分配实际空间,
剩余空间分配给最小的一组 按比率分配。
 
这句话到底啥意思呢?
我们从代码中可以看到:sidebar的box-flex-group为1,article的box-flex-group也为1,
所以 sidebar和article分配剩余的空间。 但是article的box-flex两倍于sidebar的box-flex,
所以剩余空间,article伸缩的空间 应该是 sidebar伸缩空间的两倍。
 

box-ordinal-group 作用:box-ordinal-group属性可以使我们定义子元素的显示顺序,值小的排在前,值大的排在后。
 
注意:由于此属性还处于测试当中,所以为了兼容webkit核心的浏览器,需要加上-webkit-前缀,Mozilla核心的浏览器,需要加上前缀-moz-
 
示例:
 
我们先看一下,没有运用box-ordinal-group属性时的运行效果,样式代码如下:
.sidebar{/*给侧边栏添加样式*/
background-color:#00B366;
 
-webkit-box-flex:2.0; 
-moz-box-flex:2.0;
box-flex:2.0;
}
 
.middle{/*给中间区域添加样式*/
background-color:#80C8FE;
 
-webkit-box-flex:2.0; 
-moz-box-flex:2.0;
box-flex:2.0;
}
 
.article{/*给主体内容添加样式*/
background-color:#FEB380;
 
-webkit-box-flex:2.0; 
-moz-box-flex:2.0;
box-flex:2.0;
}
此时运行页面,效果如下:
CSS3中的弹性流体盒模型技术详解(二)
            
    
    博客分类: div+csscss3 csscss3弹性布局自适应布局盒子模型
 
 
根据上面页面,当前的显示顺序是 sidebar -> middle -> article
 
现在我们给这些子元素应用box-ordinal-group,且相应值 middle < article < sidebar,则我们期待的显示顺序应该是, middle -> article -> sidebar
 
样式代码如下:
.sidebar{/*给侧边栏添加样式*/
background-color:#00B366;
 
-webkit-box-flex:2.0; 
-moz-box-flex:2.0;
box-flex:2.0;
 
-webkit-box-ordinal-group:4;
-moz-box-ordinal-group:4;
box-ordinal-group:4;
}
 
.middle{/*给中间区域添加样式*/
background-color:#80C8FE;
 
-webkit-box-flex:2.0; 
-moz-box-flex:2.0;
box-flex:2.0;
 
-webkit-box-ordinal-group:2;
-moz-box-ordinal-group:2;
box-ordinal-group:2;
}
 
.article{/*给主体内容添加样式*/
background-color:#FEB380;
 
-webkit-box-flex:2.0; 
-moz-box-flex:2.0;
box-flex:2.0;
 
-webkit-box-ordinal-group:3;
-moz-box-ordinal-group:3;
box-ordinal-group:3;
}
运行页面,效果如下:
CSS3中的弹性流体盒模型技术详解(二)
            
    
    博客分类: div+csscss3 csscss3弹性布局自适应布局盒子模型
 
 
从效果图来看,的确是按照我们所期待的顺序显示的( middle -> article -> sidebar)。
 
至此,CSS3新增弹性盒模型属性就讲完了,本节内容还是比较多的,但是它给了我们很多惊喜,让我们在页面布局方面更加收放自如。
 
下一节,我讲综合运用CSS3 弹性盒模型 属性 来手把手教大家 《CSS3实战开发: 弹性WEB界面设计(兼容移动端浏览器)》
 
欢迎大家加入互联网技术交流群:62329335 
个人申明:所分享博文,绝对原创,并力争每一个知识点都通过实战演示来进行验证。