您现在的位置是：网站首页> 编程资料编程资料

CSS3弹性盒模型开发笔记（三） _css3_CSS_网页制作_

2021-09-13 1155人已围观

简介 这篇文章主要为大家分享了CSS3弹性盒模型开发笔记的最后一篇，之前已经为大家做了铺垫，本文继续深入探讨CSS3弹性盒模型，感兴趣的小伙伴们可以参考一下

本文介绍了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. <div id="box"><img src="images/china.gif" />div>     
  3. div>  
  4. body>  
  5.   

CSS3代码：

CSS Code复制内容到剪贴板
  1. "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:#04082b url(images/map1.jpg) no-repeat top center;   
  28. }   
  29. #box{   
  30.    border:1px solid red;   
  31.    padding:4px;   
  32. }   
  33.   
  34.   

演示效果：

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

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

基本代码：

XML/HTML Code复制内容到剪贴板
  1. >  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>box-pack、box-aligntitle>  
  6. <style type="text/css">  
  7.   
  8. #box {   
  9.     border:solid 1px red;   
  10.     width:600px;   
  11.     height:400px;   
  12.   
  13.     display : -moz-box;   
  14.     display : -webkit-box;   
  15.     display : box;   
  16. }   
  17. #box div {   
  18.     margin:4px;   
  19.     border:solid 1px #eee;   
  20. }   
  21. #box div img { width:120px; }   
  22. style>  
  23. head>  
  24.   
  25. <body>  
  26. <div id="box">  
  27.     <div><img src="images/1.png" />div>  
  28.     <div><img src="images/5.png" />div>    
  29.     <div><img src="images/7.png" />div>     
  30.     <div><img src="images/9.png" />div>              
  31. div>  
  32. body>  
  33. html>  
  34.   

演示效果：

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

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

演示效果：

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

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

演示效果：

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

上一篇：CSS3弹性盒模型开发笔记（一）_css3_CSS_网页制作_

下一篇：如何使定义了高度和宽度的< a >里的文字垂直居中【实现代码】_CSS教程_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网