CSS3中几个新增加的盒模型属性如何使用好代码教程

网络
雪幕拉开，飘然而至分外美妙，初起便显现出意境；雪落十分，然间有种喜悦在心间荡漾，纷飞飘扬尽享每一刻青春的激情；飞舞的雪花，感受芬芳的韵味，迷人心脾围绕在身旁；耳畔，时常想有沙沙的声音那样的动听，百听不厌，着迷在这一刻升起动人心怀的旋律。
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. }

展示效果：

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

展示效果：

说明：
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:0px50px;//添加margin属性
  20. }
  21. .sectionThree{
  22. width:200px;
  23. background:green;
  24. }

展示效果：

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

展示效果：

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

展示效果：

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

展示效果：

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

展示效果：

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. .wrapsection{
  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表示居顶对齐，如下图所示

end
在box-align表示居底对齐，如下图所示

center
在box-align表示居中对齐，如下图所示

stretch
在box-align表示拉伸，拉伸到与父容器等高

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:1pxsolidred;
  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. .wrapsection{
  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表示水平居左对齐，如下图所示

end
在box-pack表示水平居右对齐，如下图所示

center
在box-pack表示水平居中对齐，如下图所示

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

到此这篇关于CSS3中几个新增加的盒模型属性如何使用好代码教程就介绍到这了。离别了，来不及说出口的告白，来不及挥洒的汗水，来不及奋斗的理想。更多相关CSS3中几个新增加的盒模型属性如何使用好代码教程内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例