css弹性盒模型.docVIP

  • 8
  • 0
  • 约1.68万字
  • 约 22页
  • 2017-07-02 发布于湖北
  • 举报
css弹性盒模型概要1

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

文档评论(0)

1亿VIP精品文档

相关文档