css弹性盒模型.docVIP

1 弹性盒模型对齐 !DOCTYPE html html lang=zh-cn head meta charset=utf-8 / titlebox-align/title !-- 描述：设置或检索弹性盒模型对象的子元素的对齐方式。查看其兄弟属性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： 设置弹性盒模型对象的子元素基线对齐 stretch： 设置弹性盒模型对象的子元素自适应父元素尺寸 -- style body{ background-color: deepskyblue; } 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-alig