Home思洋影视事业部网站建设知识库
0 Comments

元素的对其方式--box-pack和box-align属性（2）

发布于：2012-12-11  |   作者：广州网站建设  |   已聚集：人围观
元素的对其方式--box-pack和box-align属性（2）

运行结果如图4-7所示。

（点击查看大图）图4-7  自适应居中的登录框

代码分析：示例4-7中，直接使用登录图片，仅为了说明问题。设置box-pack属性值为center，使得登录框水平居中；设置box-align属性值为center，使得登录框垂直居中。几行CSS样式就把登录框布局到中央了。    广州网站建设

3. 底部对齐

在CSS 2.0时代，把元素布局在页面的底部也是比较困难的。下面借助box-pack属性和box-align属性来实现。

【示例4-8】 把图片布局在盒元素底部。

广州网站建设
  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>把图片布局在盒元素底部</title> 
  6. <style type="text/css"> 
  7. #box {  
  8.     width:500px;  
  9.     height:200px;  
  10.     border:1px solid #F90;  
  11.     /* 开启盒布局 */  
  12.     display:-webkit-box;  
  13.     display:-moz-box;  
  14.     display:box;      
  15.     /* 左边对齐 */  
  16.     -webkit-box-pack:start;  
  17.     -moz-box-pack:start;  
  18.     box-pack:start;  
  19.     /* 底部对齐 */  
  20.     -webkit-box-align:end;  
  21.     -moz-box-align:end;  
  22.     box-align:end;  
  23. }  
  24. #box div {  
  25.     padding:5px;  
  26.     border:1px solid #ccc;  
  27.     margin:1px;  
  28. }  
  29. #box div img {  
  30.     width:120px;  
  31. }  
  32. </style> 
  33. <body> 
  34. <div id="box"> 
  35.   <div><img src="images/IL1.jpg" /></div> 
  36.   <div><img src="images/IL2.jpg" /></div> 
  37.   <div><img src="images/IL3.jpg" /></div> 
  38.   <div><img src="images/IL4.jpg" /></div> 
  39. </div> 
  40. </body> 
  41. </html> 

 

运行结果如图4-8所示。
图4-8  把图片布局在盒元素底部

代码分析：在示例4-8中，设置box-pack属性值为start，使得子元素靠左边显示；设置box-align属性值为end，使得子元素紧贴底部显示。如图4-8所示，额外的空间会出现在右侧和顶部。   广州网站设计

提示：box-pack属性和box-align属性的对齐方式的效果，还会受到box-orient属性和box-direction属性的影响。当box-orient属性设置为垂直方向时，box-pack属性将控制垂直方向，box-align属性将控制水平方向；当box-direction属性设置为反向时，对齐方式的属性值start和end将互换效果。   广州网站设计

标签：
飞机