You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

165 lines
2.6 KiB

  1. .ub
  2. {
  3. display: -webkit-box;
  4. display: -moz-box;
  5. display: box;
  6. position:relative;
  7. }
  8. /*以反方向显示 div 框的子元素*/
  9. .ub-rev
  10. {
  11. -webkit-box-direction:reverse;
  12. -moz-box-direction:reverse;
  13. box-direction:reverse;
  14. }
  15. .ub-fh
  16. {
  17. width:100%;
  18. }
  19. .ub-fv
  20. {
  21. height:100%;
  22. }
  23. .ub-con
  24. {
  25. position:absolute;
  26. width:100%;
  27. height:100%;
  28. }
  29. /*通过使用 box-align and box-pack 属性,居中 div 框的子元素*/
  30. .ub-ac
  31. {
  32. -webkit-box-align:center;
  33. -moz-box-align:center;
  34. box-align:center;
  35. }
  36. /*通过使用 box-align and box-pack :end属性,右下 div 框的子元素*/
  37. .ub-ae
  38. {
  39. -webkit-box-align:end;
  40. -moz-box-align:end;
  41. box-align:end;
  42. }
  43. .ub-pc
  44. {
  45. -webkit-box-pack:center;
  46. -moz-box-pack:center;
  47. box-pack:center;
  48. }
  49. .ub-pe
  50. {
  51. -webkit-box-pack:end;
  52. -moz-box-pack:end;
  53. box-pack:end;
  54. }
  55. /*不知道*/
  56. .ub-pj
  57. {
  58. -webkit-box-pack:justify;
  59. -moz-box-pack:justify;
  60. box-pack:justify;
  61. }
  62. /*从上向下垂直排列子元素。*/
  63. .ub-ver
  64. {
  65. -webkit-box-orient:vertical;
  66. -moz-box-orient:vertical;
  67. box-orient:vertical;
  68. }
  69. /*box-flex主要让子容器针对父容器的宽度按一定规则进行划分*/
  70. .ub-f1
  71. {
  72. position:relative;
  73. -webkit-box-flex: 1;
  74. -moz-box-flex: 1;
  75. box-flex: 1;
  76. }
  77. .ub-f2
  78. {
  79. position:relative;
  80. -webkit-box-flex: 2;
  81. -moz-box-flex: 2;
  82. box-flex: 2;
  83. }
  84. .ub-f3
  85. {
  86. position:relative;
  87. -webkit-box-flex: 3;
  88. -moz-box-flex: 3;
  89. box-flex: 3;
  90. }
  91. .ub-f4
  92. {
  93. position:relative;
  94. -webkit-box-flex: 4;
  95. -moz-box-flex: 4;
  96. box-flex: 4;
  97. }
  98. .ub-img
  99. {
  100. /*把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。*/
  101. -webkit-background-size:contain;
  102. background-size:contain;
  103. /*背景图像将仅显示一次。*/
  104. background-repeat:no-repeat;
  105. background-position:center;
  106. }
  107. .ub-img1
  108. {
  109. /*把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
  110. 背景图像的某些部分也许无法显示在背景定位区域中。*/
  111. -webkit-background-size:cover;
  112. background-size:cover;
  113. background-repeat:no-repeat;
  114. background-position:center;
  115. }
  116. .ub-img2
  117. {
  118. background-repeat:repeat-x;
  119. /*宽高*/
  120. background-size:auto 100%
  121. }
  122. .ub-img3
  123. {
  124. background-repeat:repeat-y;
  125. background-size:100% auto
  126. }
  127. .ub-img4
  128. {
  129. -webkit-background-size:100% auto;
  130. background-size:100% auto;
  131. background-repeat:no-repeat;
  132. background-position:center;
  133. }
  134. .ub-img5
  135. {
  136. -webkit-background-size:auto 100%;
  137. background-size:auto 100%;
  138. background-repeat:no-repeat;
  139. background-position:center;
  140. }
  141. .ub-img6
  142. {
  143. background-repeat:no-repeat;
  144. background-position:center;
  145. }
  146. .ub-img7
  147. {
  148. -webkit-background-size:100% 100%;
  149. background-size:100% 100%;
  150. background-repeat:no-repeat;
  151. background-position:center;
  152. }