搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > Css3 > 正文

CSS3弹性盒模型开发笔记（三）

发布时间：2023-06-01 10:51:18 来源：互联网
.
在希望的田野上，我们看到了希望，看到了未来，看到了祖国未来繁荣昌盛的景象。

本文介绍了CSS3弹性盒模型，供大家参考，大家亦可以结合CSS3弹性盒模型开发笔记（一）、CSS3弹性盒模型开发笔记（二）进行学习，具体内容如下

box-pack和box-align属性

当弹性元素和非弹性元素混合排版时，有可能会出现所有子元素的尺寸大小或小于盒子的尺寸，从而出现盒子空间不足或者富余的情况，这时就需要一种方法来管理盒子的空间。如果子元素的总尺寸小于盒子的尺寸，则可以使用box-align和box-pack属性进行管理。

box-pack属性可以在水平方向上对盒子的富余空间进行管理，该属性的基本语法如下：

box-pack：start | end | center | justify

取值说明：

start：所有子元素都显示在盒子的左侧，富余的空间显示在盒子的右侧。

end：所有子元素都显示在盒子的右侧，富余的空间显示在盒子的左侧。

justify：富裕的空间在子元素之间平均分配。在第一个子元素之前和最后一个子元素之后不分配空间。

center：富余的空间在盒子的两侧平均分配。

  box-align属性可以在垂直方向上对盒子的富余空间进行管理，该属性的基本语法如下：

box-align：start | end | center | baseline | stretch

取值说明：

start：所有子元素沿着盒子的上边缘排列，都显示在盒子的上部，富余的空间显示在盒子的底部。

end：所有子元素沿着盒子的下边缘排列，都显示在盒子的底部，富裕的空间显示在盒子的上部。

center：富余的空间在盒子的上下两侧平均分配，即上面一半，下面一半。

baseline：所有盒子沿着它们的基线排列，富余的空间可前可后显示。

stretch：每个子元素的高度被调整到适合盒子的高度显示。

实战体验：自适应布局居中设计

HTML代码：

XML/HTML Code复制内容到剪贴板
  1. <body>
  2. <divid="box"><imgsrc="images/china.gif"/></div>
  3. </div>
  4. </body>

CSS3代码：

CSS Code复制内容到剪贴板
  1. <styletype="text/css">
  2. /*明确定义页面文档满窗口显示*/
  3. body,html{
  4. height:100%；
  5. width：100%；
  6. }
  7. body{/*清除页边距*/
  8. margin:0;
  9. padding:0;
  10. /*定义文档为弹性盒子显示*/
  11. display:box;
  12. display:-moz-box;
  13. display:-webkit-box;
  14. /*页面元素水平显示，针对本例可以省略*/
  15. box-orient:horizontal;
  16. -moz-box-orient:horizontal;
  17. -webkit-box-orient:horizontal;
  18. /*定义提示对话框页面水平居中显示*/
  19. box-pack:center;
  20. -moz-box-pack:center;
  21. -webkit-box-pack:center;
  22. box-align:center;
  23. /*定义提示对话框页面垂直居中显示*/
  24. -moz-box-align:center;
  25. -webkit-box-align:center;
  26. /*以背景方式模拟页面显示*/
  27. background:#04082burl(images/map1.jpg)no-repeattopcenter;
  28. }
  29. #box{
  30. border:1pxsolidred;
  31. padding:4px;
  32. }
  33. </style>

演示效果：

关于布局空间管理的进一步分析

分析布局空间管理的各种情况。

基本代码：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
  5. <title>box-pack、box-align</title>
  6. <styletype="text/css">
  8. #box{
  9. border:solid1pxred;
  10. width:600px;
  11. height:400px;
  13. display:-moz-box;
  14. display:-webkit-box;
  15. display:box;
  16. }
  17. #boxdiv{
  18. margin:4px;
  19. border:solid1px#eee;
  20. }
  21. #boxdivimg{width:120px;}
  22. </style>
  23. </head>
  25. <body>
  26. <divid="box">
  27. <div><imgsrc="images/1.png"/></div>
  28. <div><imgsrc="images/5.png"/></div>
  29. <div><imgsrc="images/7.png"/></div>
  30. <div><imgsrc="images/9.png"/></div>
  31. </div>
  32. </body>
  33. </html>

演示效果：

子元素全部水平和垂直居中显示显示

CSS Code复制内容到剪贴板
  1. #box{
  2. /*水平居中管理*/
  3. box-pack:center;
  4. -moz-box-pack:center;
  5. -webkit-box-pack:center;
  6. /*垂直居中管理*/
  7. box-align:center;
  8. -moz-box-align:center;
  9. -webkit-box-align:center;
  10. }

演示效果：

子元素全部位于盒子的左下角，富余空间位于右上角

CSS Code复制内容到剪贴板
  1. #box{
  2. /*水平居中管理*/
  3. box-pack:start;
  4. -moz-box-pack:start;
  5. -webkit-box-pack:start;
  6. /*垂直居中管理*/
  7. box-align:end;
  8. -moz-box-align:end;
  9. -webkit-box-align:end;
  10. }

演示效果：

- 子元素水平平均分布，垂直伸展展示

CSS Code复制内容到剪贴板
  1. #box{
  2. /*水平居中管理*/
  3. box-pack:justify;
  4. -moz-box-pack:justify;
  5. -webkit-box-pack:justify;
  6. /*垂直居中管理*/
  7. box-align:stretch;
  8. -moz-box-align:stretch;
  9. -webkit-box-align:stretch;
  10. }

演示效果：

- 子元素水平平均分布，在垂直方向上按基线分布

CSS Code复制内容到剪贴板
  1. #box{
  2. /*水平居中管理*/
  3. box-pack:justify;
  4. -moz-box-pack:justify;
  5. -webkit-box-pack:justify;
  6. /*垂直居中管理*/
  7. box-align:baselinebaseline;
  8. -moz-box-align:baselinebaseline;
  9. -webkit-box-align:baselinebaseline;
  10. font-size:28px；
  11. }

演示效果：

- 子元素全部位于盒子的右侧并平均分布，并按垂直顺序进行分布

CSS Code复制内容到剪贴板
  1. #box{
  2. /*水平居中管理*/
  3. box-pack:justify;
  4. -moz-box-pack:justify;
  5. -webkit-box-pack:justify;
  6. /*垂直居中管理*/
  7. box-align:end;
  8. -moz-box-align:end;
  9. -webkit-box-align:end;
  10. /*垂直分布*/
  11. box-orient:vertical;
  12. -moz-box-orient:vertical;
  13. -webkit-box-orient:vertical;
  14. }

演示效果：

空间溢出管理

上述“子元素全部位于盒子的右侧并平均分布，并按垂直顺序进行分布”可以看出，弹性布局中盒子内的元素很容易“跑出”盒子的“包围圈”。这种现象被称为空间已出。与传统的盒模型一样，CSS允许使用overflow属性来处理溢出内容的显示方式。当然，我们还可以使用box-lines属性避免空间已出问题（目前各大浏览器支持不太好）。该属性语法如下：

box-lines：single | multiple

取值说明：

single：所有子元素都单行或者单行显示。

multiple：所有子元素可以多行或多列显示。

实战体验：让子元素分行显示

HTML代码：

XML/HTML Code复制内容到剪贴板
  1. <body>
  2. <divid="box">
  3. <div><imgsrc="images/1.png"/></div>
  4. <div><imgsrc="images/2.png"/></div>
  5. <div><imgsrc="images/3.png"/></div>
  6. <div><imgsrc="images/4.png"/></div>
  7. <div><imgsrc="images/5.png"/></div>
  8. <div><imgsrc="images/6.png"/></div>
  9. <div><imgsrc="images/7.png"/></div>
  10. <div><imgsrc="images/8.png"/></div>
  11. </div>
  12. </body>

CSS3代码：

CSS Code复制内容到剪贴板
  1. <styletype="text/css">
  2. #box{
  3. border:solid1pxred;
  4. width:600px;
  5. height:400px;
  6. display:-moz-box;
  7. display:-webkit-box;
  8. display:box;
  9. }
  10. #box{/*定义子元素分行显示*/
  11. -moz-box-lines:multiple;
  12. -webkit-box-lines:multiple;
  13. box-lines:multiple;
  14. }
  15. #boxdiv{
  16. margin:4px;
  17. border:solid1px#aaa;
  18. -moz-box-flex:1;
  19. -webkit-box-flex:1;
  20. box-flex:1;
  21. }
  22. #boxdivimg{width:120px;}
  23. </style>

演示效果：

以上就是本文的全部内容，希望对大家的学习有所帮助。

本文地址：http://blog.csdn.net/lovejulyer/article/details/51234774

标签：
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图