开心学习
当前位置：Web前端 > > 正文

css3弹性盒模型常用属性（CSS3弹性盒模型开发笔记三）

时间：2021-11-08 16:20:30类别：Web前端

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. <li id="box"><img src="images/china.jpg" alt="css3弹性盒模型常用属性（CSS3弹性盒模型开发笔记三）" border="0" /> /></li>     
    3. </li>  
    4. </body>  
    5.   

    • CSS3代码：

  • CSS Code复制内容到剪贴板
    1. <style type="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" alt="css3弹性盒模型常用属性（CSS3弹性盒模型开发笔记三）" border="0" />no-repeat top center;   
    28. }   
    29. #box{   
    30.    border:1px solid red;   
    31.    padding:4px;   
    32. }   
    33. </style>   
    34.   

    • 演示效果：

    css3弹性盒模型常用属性（CSS3弹性盒模型开发笔记三）

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

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

    基本代码：

  • XML/HTML Code复制内容到剪贴板
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    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-align</title>  
    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 li {   
    18.     margin:4px;   
    19.     border:solid 1px #eee;   
    20. }   
    21. #box li img { width:120px; }   
    22. </style>  
    23. </head>  
    24.   
    25. <body>  
    26. <li id="box">  
    27.     <li><img src="images/1.jpg" alt="css3弹性盒模型常用属性（CSS3弹性盒模型开发笔记三）" border="0" /> /></li>  
    28.     <li><img src="images/5.jpg" alt="css3弹性盒模型常用属性（CSS3弹性盒模型开发笔记三）" border="0" /> /></li>    
    29.     <li><img src="images/7.jpg" alt="css3弹性盒模型常用属性（CSS3弹性盒模型开发笔记三）" border="0" /> /></li>     
    30.     <li><img src="images/9.jpg" alt="css3弹性盒模型常用属性（CSS3弹性盒模型开发笔记三）" border="0" /> /></li>              
    31. </li>  
    32. </body>  
    33. </html>  
    34.   

    • 演示效果：

    css3弹性盒模型常用属性（CSS3弹性盒模型开发笔记三）

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

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

    • 演示效果：

    css3弹性盒模型常用属性（CSS3弹性盒模型开发笔记三）

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

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

    • 演示效果：

    css3弹性盒模型常用属性（CSS3弹性盒模型开发笔记三）

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

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

    • 演示效果：

    css3弹性盒模型常用属性（CSS3弹性盒模型开发笔记三）

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

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

    • 演示效果：

    css3弹性盒模型常用属性（CSS3弹性盒模型开发笔记三）

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

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

    • 演示效果：

    css3弹性盒模型常用属性（CSS3弹性盒模型开发笔记三）

    空间溢出管理

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

    box-lines：single | multiple

    取值说明：

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

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

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

    HTML代码：

  • XML/HTML Code复制内容到剪贴板
    1. <body>  
    2. <li id="box">  
    3.     <li><img src="images/1.jpg" alt="css3弹性盒模型常用属性（CSS3弹性盒模型开发笔记三）" border="0" /> /></li>  
    4.     <li><img src="images/2.jpg" alt="css3弹性盒模型常用属性（CSS3弹性盒模型开发笔记三）" border="0" /> /></li>  
    5.     <li><img src="images/3.jpg" alt="css3弹性盒模型常用属性（CSS3弹性盒模型开发笔记三）" border="0" /> /></li>  
    6.     <li><img src="images/4.jpg" alt="css3弹性盒模型常用属性（CSS3弹性盒模型开发笔记三）" border="0" /> /></li>  
    7.     <li><img src="images/5.jpg" alt="css3弹性盒模型常用属性（CSS3弹性盒模型开发笔记三）" border="0" /> /></li>  
    8.     <li><img src="images/6.jpg" alt="css3弹性盒模型常用属性（CSS3弹性盒模型开发笔记三）" border="0" /> /></li>  
    9.     <li><img src="images/7.jpg" alt="css3弹性盒模型常用属性（CSS3弹性盒模型开发笔记三）" border="0" /> /></li>  
    10.     <li><img src="images/8.jpg" alt="css3弹性盒模型常用属性（CSS3弹性盒模型开发笔记三）" border="0" /> /></li>  
    11. </li>  
    12. </body>  
    13.   

    • CSS3代码：

  • CSS Code复制内容到剪贴板
    1. <style type="text/css">   
    2. #box {   
    3.     border:solid 1px red;   
    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. #box li {   
    16.     margin:4px;   
    17.     border:solid 1px #aaa;   
    18.     -moz-box-flex: 1;   
    19.     -webkit-box-flex: 1;   
    20.     box-flex: 1;   
    21. }   
    22. #box li img { width:120px; }   
    23. </style>   
    24.   

    • 演示效果：

    css3弹性盒模型常用属性（CSS3弹性盒模型开发笔记三）

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

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

    标签：
    弹性 盒模型 CSS3
    上一篇下一篇

    猜您喜欢

    热门推荐

    © 2021 开心学习