首页 > 开发 > CSS > 正文

CSS3弹性盒模型开发笔记(三)

2024-07-11 08:25:37
字体:
来源:转载
供稿:网友

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

CSS3代码:

CSS Code复制内容到剪贴板
  1. <style type="text/css">    /*明确定义页面文档满窗口显示*/  
  2. body,html{        height:100%;   
  3.     width:100%;    }   
  4. body{/*清除页边距*/       margin:0;   
  5.     padding:0;        /*定义文档为弹性盒子显示*/  
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表