.ub { display: -webkit-box; display: -moz-box; display: box; position:relative; } /*以反方向显示 div 框的子元素*/ .ub-rev { -webkit-box-direction:reverse; -moz-box-direction:reverse; box-direction:reverse; } .ub-fh { width:100%; } .ub-fv { height:100%; } .ub-con { position:absolute; width:100%; height:100%; } /*通过使用 box-align and box-pack 属性,居中 div 框的子元素*/ .ub-ac { -webkit-box-align:center; -moz-box-align:center; box-align:center; } /*通过使用 box-align and box-pack :end属性,右下 div 框的子元素*/ .ub-ae { -webkit-box-align:end; -moz-box-align:end; box-align:end; } .ub-pc { -webkit-box-pack:center; -moz-box-pack:center; box-pack:center; } .ub-pe { -webkit-box-pack:end; -moz-box-pack:end; box-pack:end; } /*不知道*/ .ub-pj { -webkit-box-pack:justify; -moz-box-pack:justify; box-pack:justify; } /*从上向下垂直排列子元素。*/ .ub-ver { -webkit-box-orient:vertical; -moz-box-orient:vertical; box-orient:vertical; } /*box-flex主要让子容器针对父容器的宽度按一定规则进行划分*/ .ub-f1 { position:relative; -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; } .ub-f2 { position:relative; -webkit-box-flex: 2; -moz-box-flex: 2; box-flex: 2; } .ub-f3 { position:relative; -webkit-box-flex: 3; -moz-box-flex: 3; box-flex: 3; } .ub-f4 { position:relative; -webkit-box-flex: 4; -moz-box-flex: 4; box-flex: 4; } .ub-img { /*把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。*/ -webkit-background-size:contain; background-size:contain; /*背景图像将仅显示一次。*/ background-repeat:no-repeat; background-position:center; } .ub-img1 { /*把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。*/ -webkit-background-size:cover; background-size:cover; background-repeat:no-repeat; background-position:center; } .ub-img2 { background-repeat:repeat-x; /*宽高*/ background-size:auto 100% } .ub-img3 { background-repeat:repeat-y; background-size:100% auto } .ub-img4 { -webkit-background-size:100% auto; background-size:100% auto; background-repeat:no-repeat; background-position:center; } .ub-img5 { -webkit-background-size:auto 100%; background-size:auto 100%; background-repeat:no-repeat; background-position:center; } .ub-img6 { background-repeat:no-repeat; background-position:center; } .ub-img7 { -webkit-background-size:100% 100%; background-size:100% 100%; background-repeat:no-repeat; background-position:center; }