脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > css3 >

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

设计帝国   发布时间：2016-03-01 11:46:06   作者：佚名   我要评论
这篇文章主要介绍了CSS3中几个新增加的盒模型属性使用教程,其中重点讲解了最常用的box-flex属性,需要的朋友可以参考下
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. }  

展示效果：
201631115053044.jpg (541×107)

说明：
必须给父容器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. }  

展示效果：
201631115110361.jpg (540×108)

说明：
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. }  

展示效果：
201631115130826.jpg (542×109)

说明：
父容器的宽度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. }  

展示效果：
201631115154305.jpg (540×107)

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. }  

展示效果：
201631115213940.jpg (539×182)

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. }  

展示效果：
201631115248217.jpg (537×107)

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. }  

展示效果：
201631115342711.jpg (541×108)

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表示居顶对齐，如下图所示
201631115408970.jpg (544×99)

end
在box-align表示居底对齐，如下图所示
201631115453416.jpg (541×96)

center
在box-align表示居中对齐，如下图所示
201631115511678.jpg (539×96)

stretch
在box-align表示拉伸，拉伸到与父容器等高
201631115528844.jpg (541×98)

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表示水平居左对齐，如下图所示
201631115555654.jpg (543×98)

end
在box-pack表示水平居右对齐，如下图所示
201631115611484.jpg (542×98)

center
在box-pack表示水平居中对齐，如下图所示
201631115630411.jpg (542×96)

justify
在box-pack表示水平等分父容器宽度（唯一遗憾的是，firefox与opera暂时不支持，只有safari、chrome支持）
201631115648907.jpg (540×97)

相关文章

  • css3弹性盒模型（Flexbox）详细介绍

    今天刚学了css3的弹性盒模型，这是一个可以让你告别浮动、完美实现垂直水平居中的新特性。本文主要是总结一下今天所学，有需要的朋友可以参考下
    2014-10-08

  • css3弹性盒模型实例介绍

    Css3引入了新的盒模型——弹性盒模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间，使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大
    2013-05-27

  • 深入讲解CSS中盒模型的用法

    这篇文章主要介绍了深入讲解CSS中盒模型的用法,是CSS入门学习中的基础知识,需要的朋友可以参考下
    2015-09-01

  • 3DSMAX打造漂亮的花瓣型纸盒模型教程

    这篇教程是向脚本之家的朋友介绍3DSMAX打造漂亮的花瓣型纸盒模型方法，教程制作出来的纸盒模型非常的漂亮，难度也不是很大，很值得学习，推荐到脚本之家，喜欢的朋友可以跟
    2015-04-09

  • css盒模型和块级、行内元素深入理解

    盒模型是CSS的核心知识点之一，它指定元素如何显示以及如何相互交互。页面上的每个元素都被看成一个矩形框，这个框由元素的内容、内边距、边框和外边距组成,需要了解的朋友
    2012-12-24

  • CSS 盒模型（Box Model）的学习和理解

    CSS盒模型（Box Model）的学习和理解一直是学习DivCSS网页布局的基础内容。但有很多CSS初学者依然不够熟悉，虽然我们提供了很多相关的教程。大家可以多学习与思考。今天发
    2010-03-25

  • CSS 盒模型、块状元素与内联元素、CSS选择器

    CSS实例 盒模型、块状元素与内联元素、CSS选择器.
    2010-01-07

  • CSS教程之CSS盒模型

    CSS 盒模型 网页设计中的每个元素都是长方形的盒子。盒子的尺寸是怎样精确计算的，请看下图： 如果是 Firebug 用户的话(基本和前端有关的都会用到 Firebug 吧 –
    2009-06-06

  • CSS教程:通过实例学习和理解CSS盒模型

    网页制作Webjx文章简介：盒模型主要定义四个区域：内容（content）、内边框距（padding）、边框（border）和外边距（margin）。 自从1996年CSS1的推出，W3
    2009-04-02

  • CSS网页布局的核心内容:CSS盒模型

    网页制作Webjx文章简介：本节的内容非常重要，因为盒模型是CSS定位布局的核心内容。从前面章节中，读者学习了布局网页基本方法，只需利用p元素和列表元素，即可完成页面大
    2009-04-02

最新评论

关注微信公众号

扫一扫