CSS box-align属性

box-align属性的定义和用法:
设置或检索弹性盒模型对象的子元素的对齐方式。
查看其兄弟属性box-pack，两者的效果正好（相反）互补。
box-align的对齐方式受box-orient影响。
默认情况下（即box-orient设置为horizontal）start和end所呈现的效果等同于顶部对齐和底部对齐。
当box-orient设置为vertical时，start和end所呈现的效果等同于左对齐和右对齐。
对应的脚本特性为boxAlign。
语法结构:

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

取值:
stretch：设置弹性盒模型对象的子元素自适应父元素尺寸。
start：设置弹性盒模型对象的子元素从开始位置对齐。
center：设置弹性盒模型对象的子元素居中对齐。
end：设置弹性盒模型对象的子元素从结束位置对齐。
baseline：设置弹性盒模型对象的子元素基线对齐。
浏览器支持:
1.IE9和IE9以下的浏览器不支持此属性。
2.Opera浏览器不支持此属性。
3.Opera、Safari和Chrome浏览器支持此属性。
4.除IE浏览器外暂时需要使用各自浏览器的兼容性写法。
继承性:
无继承性。
代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
h1{font:bold 20px/1.5 georgia, simsun, sans-serif;} 
.box, .box2 
{ 
  display:-webkit-box; 
  display:-moz-box; 
  display:-o-box; 
  display:-ms-box; 
  display:box; 
  margin:0; 
  padding:10px; 
  background:#000; 
  list-style:none; 
} 
.box 
{ 
  -webkit-box-orient:horizontal; 
  -moz-box-orient:horizontal; 
  -o-box-orient:horizontal; 
  -ms-box-orient:horizontal; 
  box-orient:horizontal; 
  width:260px; 
  height:100px; 
} 
.box2 
{ 
  -webkit-box-orient:vertical; 
  -moz-box-orient:vertical; 
  -o-box-orient:vertical; 
  -ms-box-orient:vertical; 
  box-orient:vertical; 
  width:100px; 
  height:260px; 
} 
#box, #box6 
{ 
  -webkit-box-align:start; 
  -moz-box-align:start; 
  -o-box-align:start; 
  -ms-box-align:start; 
  box-align:start; 
} 
#box2, #box7 
{ 
  -webkit-box-align:center; 
  -moz-box-align:center; 
  -o-box-align:center; 
  -ms-box-align:center; 
  box-align:center; 
} 
#box3, #box8 
{ 
  -webkit-box-align:end; 
  -moz-box-align:end; 
  -o-box-align:end; 
  -ms-box-align:end; 
  box-align:end; 
} 
#box4, #box9 
{ 
  -webkit-box-align:baseline; 
  -moz-box-align:baseline; 
  -o-box-align:baseline; 
  -ms-box-align:baseline; 
  box-align:baseline; 
} 
#box5, #box10 
{ 
  -webkit-box-align:stretch; 
  -moz-box-align:stretch; 
  -o-box-align:stretch; 
  -ms-box-align:stretch; 
  box-align:stretch; 
} 
.box li, .box2 li{padding:10px; } 
.box li:nth-child(1), .box2 li:nth-child(1){background:#666;} 
.box li:nth-child(2), .box2 li:nth-child(2){background:#999;} 
.box li:nth-child(3), .box2 li:nth-child(3){background:#ccc;} 
</style> 
</head> 
<body> 
<h1>横向排列时子元素从起始位置对齐 box-align:start;</h1> 
<ul id="box" class="box"> 
  <li>1</li> 
  <li>2</li> 
  <li>3</li> 
</ul> 
<h1>横向排列时子元素居中对齐 box-align:center;</h1> 
<ul id="box2" class="box"> 
  <li>1</li> 
  <li>2</li> 
  <li>3</li> 
</ul> 
<h1>横向排列时子元素从结束位置对齐 box-align:end;</h1> 
<ul id="box3" class="box"> 
  <li>1</li> 
  <li>2</li> 
  <li>3</li> 
</ul> 
<h1>横向排列时子元素基线对齐 box-align:baseline;</h1> 
<ul id="box4" class="box"> 
  <li>1</li> 
  <li>2</li> 
  <li>3</li> 
</ul> 
<h1>横向排列时子元素自适应父元素 box-align:stretch;</h1> 
<ul id="box5" class="box"> 
  <li>1</li> 
  <li>2</li> 
  <li>3</li> 
</ul> 
<h1>纵向排列时子元素从起始位置对齐 box-align:start;</h1> 
<ul id="box" class="box2"> 
  <li>1</li> 
  <li>2</li> 
  <li>3</li> 
</ul> 
<h1>纵向排列时子元素居中对齐 box-align:center;</h1> 
<ul id="box2" class="box2"> 
  <li>1</li> 
  <li>2</li> 
  <li>3</li> 
</ul> 
<h1>纵向排列时子元素从结束位置对齐 box-align:end;</h1> 
<ul id="box3" class="box2"> 
  <li>1</li> 
  <li>2</li> 
  <li>3</li> 
</ul> 
<h1>纵向排列时子元素基线对齐 box-align:baseline;</h1> 
<ul id="box4" class="box2"> 
  <li>1</li> 
  <li>2</li> 
  <li>3</li> 
</ul> 
<h1>纵向排列时子元素自适应父元素 box-align:stretch;</h1> 
<ul id="box5" class="box2"> 
  <li>1</li> 
  <li>2</li> 
  <li>3</li> 
</ul> 
</body> 
</html>

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=1401

更多内容可以参阅:http://www.softwhy.com/divcss/

爱程序网

Tags：[db:关键字]