OOCSS(面向對象的CSS)總結

按鈕樣式庫：buttons.css

  1 /* vue */
  2 [v-cloak]{display: none}
  3 
  4 /* 滾動條 */
  5 ::-webkit-scrollbar {
  6     width: 6px;
  7     height: 6px;
  8     background-color: transparent;
  9 }
 10 ::-webkit-scrollbar-thumb {
 11     background: linear-gradient(-90deg, rgba(215, 215, 215, 0.95), rgba(225, 228, 228, 0.95));
 12     border-radius: 2px;
 13 }
 14 ::-webkit-scrollbar-track {
 15     background-color: transparent;
 16 }
 17 
 18 /* 全局 */
 19 /**
 20  * -webkit-overflow-scrolling: touch; //有回彈效果 
 21  * -webkit-overflow-scrolling: auto; //滑到哪停到哪 
 22  **/
 23 *{padding: 0;margin: 0;font-style: normal;outline: none;box-sizing: border-box;-webkit-overflow-scrolling: touch;-webkit-tap-highlight-color:transparent;}
 24 ul,ol{list-style: none;}
 25 a{text-decoration: none;}
 26 table{border-collapse: collapse;}
 27 html,body{position: relative;}
 28 
 29 /* 定位 */
 30 .por{position: relative;}
 31 .poa{position: absolute;}
 32 .pof{position: fixed;}
 33 .left{left: 0;}
 34 .top{top: 0;}
 35 .right{right: 0;}
 36 .bottom{bottom: 0;}
 37 .left_50{left: 50%;}
 38 .top_50{top: 50%;}
 39 .right_50{right: 50%;}
 40 .bottom_50{bottom: 50%;}
 41 .transform_center{transform: translate(-50%,-50%);}
 42 .transform_X{transform: translateX(-50%);}
 43 .transform_Y{transform: translateY(-50%);}
 44 .z-1{z-index: -1;}
 45 .z0{z-index: 0;}
 46 .z1{z-index: 1;}
 47 .z2{z-index: 2;}
 48 .z3{z-index: 3;}
 49 .z4{z-index: 4;}
 50 .z5{z-index: 5;}
 51 .z6{z-index: 6;}
 52 .z9999{z-index: 9999;}
 53 .z99999{z-index: 99999;}
 54 
 55 /* 浮動 */
 56 .L{float: left;}
 57 .R{float: right;}
 58 .clear::before,
 59 .clear::after{content: '';clear: both;display: block;}
 60 
 61 /* 塊級、文本元素 */
 62 .inblock{display: inline-block;}
 63 .grid{display: grid;}
 64 .block{display: block;}
 65 .inline{display: inline;}
 66 .webkitbox{display: -webkit-box;}
 67 
 68 
 69 /* 圖片填充 */
 70 .of_cover{object-fit: cover;}
 71 .of_contain{object-fit: contain;}
 72 
 73 
 74 /* 背景圖片填充 */
 75 .bgs_cover{background-size: cover;}
 76 .bgp_center{background-position: center;}
 77 
 78 /* 文本 */
 79 .txt_normal{font-weight: 400;font-style: normal;}
 80 .pointer{cursor: pointer;}
 81 .txt_left{text-align: left;}
 82 .txt_center{text-align: center;}
 83 .txt_nowrap{white-space: nowrap;}
 84 .txt_ellipsis{text-overflow: ellipsis;}
 85 .txt_justify{text-align: justify;}
 86 .b{font-weight: bolder;}
 87 .middle{vertical-align: middle;}
 88 
 89 
 90 /* 溢出 */
 91 .overhidden{overflow: hidden;}
 92 .overauto{overflow: auto;}
 93 .overhidden-x{overflow-x: hidden;overflow-y: auto;}
 94 .overhidden-y{overflow-y: hidden;overflow-x: auto;}
 95 
 96 /* flex彈性佈局 */
 97 .flex{display: flex;}
 98 .jc_start{justify-content: flex-start;}
 99 .jc_center{justify-content: center;}
100 .jc_between{justify-content: space-between;}
101 .ai_center{align-items: center;}
102 .ai_end{align-items: flex-end;}
103 .flex1{flex: 1;}
104 
105 
106 /* border */
107 .border{border: 0;}
108 .border_l{border-left: 0;}
109 .border_t{border-top: 0;}
110 .border_r{border-right: 0;}
111 .border_b{border-bottom: 0;}
112 
113 /* border-radius */
114 .radius1{border-radius: 1px;}
115 .radius2{border-radius: 2px;}
116 .radius3{border-radius: 3px;}
117 .radius4{border-radius: 4px;}
118 .radius5{border-radius: 5px;}
119 .radius6{border-radius: 6px;}
120 .radius7{border-radius: 7px;}
121 .radius8{border-radius: 8px;}
122 .radius9{border-radius: 9px;}
123 .radius10{border-radius: 10px;}
124 .radius_tl{border-top-left-radius: 0;}
125 .radius_tr{border-top-right-radius: 0;}
126 .radius_br{border-bottom-right-radius: 0;}
127 .radius_bl{border-bottom-left-radius: 0;}
128 
129 
130 /* font-size */
131 .f8{font-size: 8px;}
132 .f9{font-size: 9px;}
133 .f10{font-size: 10px;}
134 .f11{font-size: 11px;}
135 .f12{font-size: 12px;}
136 .f13{font-size: 13px;}
137 .f14{font-size: 14px;}
138 .f15{font-size: 15px;}
139 .f16{font-size: 16px;}
140 .f17{font-size: 17px;}
141 .f18{font-size: 18px;}
142 .f19{font-size: 19px;}
143 .f20{font-size: 20px;}
144 
145 
146 /* 寬度 */
147 .w_10{width: 10%;}
148 .w_20{width: 20%;}
149 .w_30{width: 30%;}
150 .w_333{width: 33.3%;}
151 .w_40{width: 40%;}
152 .w_50{width: 50%;}
153 .w_60{width: 60%;}
154 .w_70{width: 70%;}
155 .w_80{width: 80%;}
156 .w_90{width: 90%;}
157 .w_100{width: 100%;}
158 .w100{width: 100px;}
159 
160 /* 高度 */
161 .h_10{height: 10%;}
162 .h_20{height: 20%;}
163 .h_30{height: 30%;}
164 .h_333{height: 33.3%;}
165 .h_40{height: 40%;}
166 .h_50{height: 50%;}
167 .h_60{height: 60%;}
168 .h_70{height: 70%;}
169 .h_80{height: 80%;}
170 .h_90{height: 90%;}
171 .h_100{height: 100%;}
172 .h100{height: 100px;}
173 .lh100{line-height: 100px;}
174 
175 
176 /* color */
177 .color333{color: #333;}
178 .color666{color: #666;}
179 .color999{color: #999;}
180 .colorccc{color: #ccc;}
181 .coloreee{color: #eee;}
182 .colorfff{color: #fff;}
183 
184 /* background-color */
185 .bgcolor333{background-color: #333;}
186 .bgcolor666{background-color: #666;}
187 .bgcolor999{background-color: #999;}
188 .bgcolorccc{background-color: #ccc;}
189 .bgcoloreee{background-color: #eee;}
190 .bgcolorfff{background-color: #fff;}
191 
192 
193 /* opacity */
194 .opa0{opacity: 0;}
195 .opa1{opacity: 0.1;}
196 .opa2{opacity: 0.2;}
197 .opa3{opacity: 0.3;}
198 .opa4{opacity: 0.4;}
199 .opa5{opacity: 0.5;}
200 .opa6{opacity: 0.6;}
201 .opa7{opacity: 0.7;}
202 .opa8{opacity: 0.8;}
203 .opa9{opacity: 0.9;}
204 
205 /* padding */
206 .pad10{padding: 10px;}
207 .pad15{padding: 15px;}
208 .pad20{padding: 20px;}
209 .pad24{padding: 24px;}
210 .pad30{padding: 30px;}
211 .pad{padding: 0;}
212 .pad_l{padding-left: 0;}
213 .pad_t{padding-top: 0;}
214 .pad_r{padding-right: 0;}
215 .pad_b{padding-bottom: 0;}
216 
217 /* margin */
218 .mar_auto{margin: 0 auto;}
219 .mar10{margin: 10px;}
220 .mar15{margin: 15px;}
221 .mar20{margin: 20px;}
222 .mar24{margin: 24px;}
223 .mar30{margin: 30px;}
224 .mar{margin: 0;}
225 .mar_l{margin-left: 0;}
226 .mar_t{margin-top: 0;}
227 .mar_r{margin-right: 0;}
228 .mar_b{margin-bottom: 0;}
229 
230 /* 解決ios-button圓角問題 */
231 .ios_btn{-webkit-appearance : none ;}