CSS3中几个新增加的盒模型属性使用教程


Posted in HTML / CSS onMarch 01, 2016

display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。
目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari(-webkit-)。
一、box-flex属性
box-flex主要让子容器针对父容器的宽度按一定规则进行划分
html代码:

XML/HTML Code复制内容到剪贴板
  1. <article>  
  2.     <section>01</section>  
  3.     <section>02</section>  
  4.     <section>03</section>  
  5. </article>  
CSS代码:
CSS Code复制内容到剪贴板
  1. .wrap{   
  2.     width:600px;   
  3.     height:200px;   
  4.     display:-moz-box;   
  5.     display:-webkit-box;   
  6.     display:box;   
  7. }   
  8. .sectionOne{   
  9.     background:orange;   
  10.     -moz-box-flex:3;   
  11.     -webkit-box-flex:3;   
  12.     box-flex:3;   
  13. }   
  14. .sectionTwo{   
  15.     background:purple;   
  16.     -moz-box-flex:2;   
  17.     -webkit-box-flex:2;   
  18.     box-flex:2;   
  19. }   
  20. .sectionThree{   
  21.     -moz-box-flex:1;   
  22.     -webkit-box-flex:1;   
  23.     box-flex:1;   
  24.     background:green;   
  25. }  

展示效果:
CSS3中几个新增加的盒模型属性使用教程

说明:
必须给父容器wrap定义css属性display:box其子容器才可以进行划分(如果定了display:box则该容器则定义为了内联元素,使用margin:0px auto让其居中是无效的,要想使其居中只能通过它的父容器的text-align:center);分别给sectionOne、sectionTwo、sectionThree的box-flex设置了3、2、1,也就是说这三个子容器将父容器wrap的宽度600px分为6份,sectionOne占居父结构宽度的3/6即300px,sectionOne占居父结构宽度的2/6即200px,sectionThree占居父结构宽度的1/6即100px。
以上是按比例数进行划分分配的,如果其中一个子容器或多个子容器设置了固定宽度又会怎样划分那?
如果其中一个子容器或多个子容器设置了固定宽度,其它子容器没有设置,其计算方式是这样的:子容器如果设置了固定宽度值,该子容器则直接应用设置的宽度值,其它没有设置的则再父容器的宽度基础上减去子容器设置的固定宽度,在剩下的宽度基础上按一定比例进行划分分配。请看下面代码:
HTML代码:

XML/HTML Code复制内容到剪贴板
  1. <article>  
  2.     <section>01</section>  
  3.     <section>02</section>  
  4.     <section>03</section>  
  5. </article>  
CSS代码:
CSS Code复制内容到剪贴板
  1. .wrap{   
  2.     width:600px;   
  3.     height:200px;   
  4.     display:-moz-box;   
  5.     display:-webkit-box;   
  6.     display:box;   
  7. }   
  8. .sectionOne{   
  9.     background:orange;   
  10.     -moz-box-flex:3;   
  11.     -webkit-box-flex:3;   
  12.     box-flex:3;   
  13. }   
  14. .sectionTwo{   
  15.     background:purple;   
  16.     -moz-box-flex:1;   
  17.     -webkit-box-flex:1;   
  18.     box-flex:1;   
  19. }   
  20. .sectionThree{   
  21.     width:200px;//设置固定宽度   
  22.     background:green;   
  23. }  

展示效果:
CSS3中几个新增加的盒模型属性使用教程

说明:
sectionThree设置了固定宽度为200px,父容器的宽度600px减去改子容器的200px还剩下400px,这400px宽度值则按box-flex设置的值进行划分,sectionOne占居3/4即300px,sectionTwo占居1/4即100px。
在以上代码的基础上给sectionTwo子容器添加margin:0px 50px使子容器之间产生一定的间隔其宽度又如何进行分配划分的那?接着看
CSS代码:

CSS Code复制内容到剪贴板
  1. .wrap{   
  2.     width:600px;   
  3.     height:200px;   
  4.     display:-moz-box;   
  5.     display:-webkit-box;   
  6.     display:box;   
  7. }   
  8. .sectionOne{   
  9.     background:orange;   
  10.     -moz-box-flex:3;   
  11.     -webkit-box-flex:3;   
  12.     box-flex:3;   
  13. }   
  14. .sectionTwo{   
  15.     background:purple;   
  16.     -moz-box-flex:1;   
  17.     -webkit-box-flex:1;   
  18.     box-flex:1;   
  19.         margin:0px 50px;//添加margin属性   
  20. }   
  21. .sectionThree{   
  22.     width:200px;   
  23.     background:green;   
  24. }  

展示效果:
CSS3中几个新增加的盒模型属性使用教程

说明:
父容器的宽度600px减去设置了子容器的200px基础上再减去100px(2×50)剩下300px,这300px宽度值则按box-flex设置的值进行划分,sectionOne占居3/4即225px,sectionTwo占居1/4即75px。

二、box属性
上面”css3弹性盒子模型之box-flex”将box-flex如何对父容器的宽度进行划分分配讲解完毕,下面在看一下父容器里面的box属性包括哪些box属性,具体属性如下代码所示:
box-orient | box-direction | box-align | box-pack | box-lines

1、box-orient
box-orient(orient译为排列更准确)用来确定父容器里子容器的排列方式,是水平还是垂直。可选属性如下所示:
horizontal | vertical | inline-axis | block-axis | inherit
horizontal、inline-axis说明:
给box设置horizontal或inline-axis属性其效果似乎表现一致,都可将子容器水平排列,具体两者有什么实质差别暂时还没有搞清楚。如果父容器选择horizontal或inline-axis属性对子容器进行水平排列,其是对父容器的宽度进行分配划分。此时如果父容器定义了高度值,其子容器的高度值设置则无效状态,所有子容器的高度等于父容器的高度值;如果父容器不设置高度值,其子容器的高度值才有效并且取最大高度值的子容器的高度。
HTML代码:

XML/HTML Code复制内容到剪贴板
  1. <article>  
  2.     <section>01</section>  
  3.     <section>02</section>  
  4.     <section>03</section>  
  5. </article>  
CSS代码:
CSS Code复制内容到剪贴板
  1. .wrap{   
  2.  width:600px;   
  3.  height:200px;   
  4.  display:-moz-box;   
  5.  display:-webkit-box;   
  6.  display:box;   
  7.  -moz-box-orient:horizontal;   
  8.  -webkit-box-orient:horizontal;   
  9.  box-orient:horizontal;//水平排列   
  10. }   
  11. .sectionOne{   
  12.  background:orange;   
  13.  -moz-box-flex:1;   
  14.  -webkit-box-flex:1;   
  15.  box-flex:1;   
  16. }   
  17. .sectionTwo{   
  18.  background:purple;   
  19.  -moz-box-flex:2;   
  20.  -webkit-box-flex:2;   
  21.  box-flex:2;   
  22. }   
  23. .sectionThree{   
  24.  width:100px;   
  25.  background:green;   
  26. }  

展示效果:
CSS3中几个新增加的盒模型属性使用教程

vertical、block-axis说明:
给box设置vertical或block-axis属性(此属性是默认值)其效果似乎表现一致,都可将子容器垂直排列,具体两者有什么实质差别暂时还没有搞清楚。如果父容器选择vertical或block-axis属性对子容器进行垂直排列,其是对父容器的高度进行分配划分。此时如果父容器定义了宽度值,其子容器的宽度值设置则无效状态;如果父容器不设置宽度值,其子容器的宽度值才有效并且取最大宽度值的子容器的宽度。
HTML代码:

XML/HTML Code复制内容到剪贴板
  1. <article>  
  2.     <section>01</section>  
  3.     <section>02</section>  
  4.     <section>03</section>  
  5. </article>  
CSS代码:
CSS Code复制内容到剪贴板
  1. .wrap{   
  2.  width:600px;   
  3.  height:200px;   
  4.  display:-moz-box;   
  5.  display:-webkit-box;   
  6.  display:box;   
  7.  -moz-box-orient:vertical;   
  8.  -webkit-box-orient:vertical;   
  9.  box-orient:vertical;//垂直排列   
  10. }   
  11. .sectionOne{   
  12.  background:orange;   
  13.  -moz-box-flex:1;   
  14.  -webkit-box-flex:1;   
  15.  box-flex:1;   
  16. }   
  17. .sectionTwo{   
  18.  background:purple;   
  19.  -moz-box-flex:2;   
  20.  -webkit-box-flex:2;   
  21.  box-flex:2;   
  22. }   
  23. .sectionThree{   
  24.  height:100px;   
  25.  background:green;   
  26. }  

展示效果:
CSS3中几个新增加的盒模型属性使用教程

inherit说明:
inherit属性则是让子容器继承父容器的相关属性。

2、box-direction
box-direction用来确定父容器里的子容器排列顺序,具体属性如下代码所示:
normal | reverse | inherit
normal是默认值
按照HTML文档里结构的先后顺序依次展示。如下代码,如果box-direction设置为normal,则结构依次展示sectionOne、sectionTwo、sectionThree.
HTML代码:

XML/HTML Code复制内容到剪贴板
  1. <article>  
  2.     <section>01</section>  
  3.     <section>02</section>  
  4.     <section>03</section>  
  5. </article>  
CSS代码:
CSS Code复制内容到剪贴板
  1. .wrap{   
  2.  width:600px;   
  3.  height:200px;   
  4.  display:-moz-box;   
  5.  display:-webkit-box;   
  6.  display:box;   
  7.  -moz-box-direction:normal;//设置mormal默认值   
  8.  -webkit-box-direction:normal;//设置mormal默认值   
  9.  box-direction:normal;//设置mormal默认值   
  10. }   
  11. .sectionOne{   
  12.  background:orange;   
  13.  -moz-box-flex:1;   
  14.  -webkit-box-flex:1;   
  15.  box-flex:1;   
  16. }   
  17. .sectionTwo{   
  18.  background:purple;   
  19.  -moz-box-flex:2;   
  20.  -webkit-box-flex:2;   
  21.  box-flex:2;   
  22. }   
  23. .sectionThree{   
  24.  width:100px;   
  25.  background:green;   
  26. }  

展示效果:
CSS3中几个新增加的盒模型属性使用教程

reverse表示反转:
如上面所示设置nomal其结构的排列顺序为sectionOne、sectionTwo、sectionThree;如果设置reverse反转,其结构的排列顺序为sectionThree、sectionTwo、sectionOne.
HTML代码:

XML/HTML Code复制内容到剪贴板
  1. <article>  
  2.     <section>01</section>  
  3.     <section>02</section>  
  4.     <section>03</section>  
  5. </article>  
CSS代码:
CSS Code复制内容到剪贴板
  1. .wrap{   
  2.  width:600px;   
  3.  height:200px;   
  4.  display:-moz-box;   
  5.  display:-webkit-box;   
  6.  display:box;   
  7.  -moz-box-direction:reverse;//设置为反转   
  8.  -webkit-box-direction:reverse;//设置为反转   
  9.  box-direction:reverse;//设置为反转   
  10. }   
  11. .sectionOne{   
  12.  background:orange;   
  13.  -moz-box-flex:1;   
  14.  -webkit-box-flex:1;   
  15.  box-flex:1;   
  16. }   
  17. .sectionTwo{   
  18.  background:purple;   
  19.  -moz-box-flex:2;   
  20.  -webkit-box-flex:2;   
  21.  box-flex:2;   
  22. }   
  23. .sectionThree{   
  24.  width:100px;   
  25.  background:green;   
  26. }  

展示效果:
CSS3中几个新增加的盒模型属性使用教程

3、box-align
box-align表示父容器里面子容器的垂直对齐方式,可选参数如下所示:
start | end | center | baseline | stretch
HTML代码:

XML/HTML Code复制内容到剪贴板
  1. <article>  
  2. <section>01</section>  
  3.     <section>02</section>  
  4.     <section>03</section>  
  5. </article>  
CSS代码:
CSS Code复制内容到剪贴板
  1. .wrap{   
  2.  width:600px;   
  3.  height:108px;   
  4.  display:-moz-box;   
  5.  display:-webkit-box;   
  6.  display:box;   
  7.  -moz-box-align:stretch;   
  8.  -webkit-box-align:stretch;   
  9.  -o-box-align:stretch;   
  10.  box-align:stretch;   
  11. }   
  12. .wrap section{   
  13.  height:80px;   
  14. }   
  15. .wrap .sectionOne{   
  16.  background:orange;   
  17.  -moz-box-flex:1;   
  18.  -webkit-box-flex:1;   
  19.  box-flex:1;   
  20. }   
  21. .wrap .sectionTwo{   
  22.  background:purple;   
  23.  -moz-box-flex:2;   
  24.  -webkit-box-flex:2;   
  25.  box-flex:2;   
  26.  height:108px;   
  27. }   
  28. .wrap .sectionThree{   
  29.  width:100px;   
  30.  background:green;   
  31. }  

start
在box-align表示居顶对齐,如下图所示
CSS3中几个新增加的盒模型属性使用教程

end
在box-align表示居底对齐,如下图所示
CSS3中几个新增加的盒模型属性使用教程

center
在box-align表示居中对齐,如下图所示
CSS3中几个新增加的盒模型属性使用教程

stretch
在box-align表示拉伸,拉伸到与父容器等高
CSS3中几个新增加的盒模型属性使用教程

4、box-pack
box-pack表示父容器里面子容器的水平对齐方式,可选参数如下所示:
start | end | center | justify
HTML代码:

XML/HTML Code复制内容到剪贴板
  1. <article>  
  2.     <section>01</section>  
  3.     <section>02</section>  
  4.     <section>03</section>  
  5. </article>  
CSS代码:
CSS Code复制内容到剪贴板
  1. .wrap{   
  2.  width:600px;   
  3.  height:108px;   
  4.  border:1px solid red;   
  5.  display:-moz-box;   
  6.  display:-webkit-box;   
  7.  display:box;   
  8.  -moz-box-pack:end;   
  9.  -webkit-box-pack:end;   
  10.  -o-box-pack:end;   
  11.  box-pack:end;   
  12. }   
  13. .wrap section{   
  14.  width:100px;   
  15. }   
  16. .wrap .sectionOne{   
  17.  background:orange;   
  18. }   
  19. .wrap .sectionTwo{   
  20.  background:purple;   
  21. }   
  22. .wrap .sectionThree{   
  23.  background:green;   
  24. }  

start
在box-pack表示水平居左对齐,如下图所示
CSS3中几个新增加的盒模型属性使用教程

end
在box-pack表示水平居右对齐,如下图所示
CSS3中几个新增加的盒模型属性使用教程

center
在box-pack表示水平居中对齐,如下图所示
CSS3中几个新增加的盒模型属性使用教程

justify
在box-pack表示水平等分父容器宽度(唯一遗憾的是,firefox与opera暂时不支持,只有safari、chrome支持)
CSS3中几个新增加的盒模型属性使用教程

HTML / CSS 相关文章推荐
CSS3属性使网站设计增强同时不消弱可用性
Aug 29 HTML / CSS
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
CSS3弹性盒模型开发笔记(二)
Apr 26 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
May 11 HTML / CSS
用HTML5制作烟火效果的教程
May 12 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
clear 万能清除浮动(clearfix:after)
May 21 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 #HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 #HTML / CSS
CSS3媒体查询Media Queries基础学习教程
Feb 29 #HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
Feb 27 #HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 #HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
Feb 27 #HTML / CSS
CSS3 text-shadow实现文字阴影效果
Feb 24 #HTML / CSS
You might like
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
php session的锁和并发
2016/01/22 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
Python urls.py的三种配置写法实例详解
2017/04/28 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
python爬虫工具例举说明
2020/11/30 Python
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
linux面试题参考答案(10)
2013/11/04 面试题
一道Delphi面试题
2016/10/28 面试题
母亲80寿诞答谢词
2014/01/16 职场文书
优秀员工评语
2014/02/10 职场文书
销售内勤岗位职责
2014/04/15 职场文书
事业单位考核材料
2014/05/21 职场文书
优秀会计求职信
2014/07/04 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
工作证明英文模板
2014/10/21 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
python scrapy简单模拟登录的代码分析
2021/07/21 Python
Java字符串逆序方法详情
2022/03/21 Java/Android
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技