CSS-初始化模板2(common.css)
2021-03-03 23:27
标签：左右 app display 文本 bsp group margin auto otto 这个代码是在网络上找到的，属于一个比较适合移动端的初始化代码，查阅后并对齐进行了一些整理，目前只整理了一部分，后续将慢慢在学习和使用的过程中继续整理。 CSS-初始化模板2(common.css) 标签：左右 app display 文本 bsp group margin auto otto 原文地址：https://www.cnblogs.com/miao91/p/13270153.html 1 默认字体大小14px
2 360px的veiwport屏幕下字体大小18px
3
4 清除浮动：.clearfix .clear
5 显示元素：.block
6 隐藏元素：.hide
7
8 布局：
9 浮动：float、clear
10 内联元素、左浮动：.fl
11 内联元素、右浮动：.fr
12 左侧不浮动：.cl
13 右侧不浮动：.cr
14 左右侧不浮动：.cb
15 定位：position
16 相对定位：.rel
17 绝对定位：.abs
18 水平对齐：text-align
19 居左：.tal
20 居中：.tac
21 居右：.tar
22 内联块：.dib
23 垂直对齐：vertical-align
24 居上：.vat
25 居中：.vam
26 居下：.vab
27 网格：
28 元素宽度/高度=内边距+边框+自身：.wrap
29 元素宽度/高度=内边距+边框+自身、文本居中、内边距上下5px：.box
30 Flex：
31 容器：
32
33 宽度：
34 100%宽度：.w100p
35 20%宽度：.w20p
36 边距：
37 5px外边距：.m5
38 5px内边距：.p5
39 5px上内边距：.pt5
40
1 @charset "utf-8";
2 html,body{
3 background:#f0f0f0;
4 color:#505050;
5 font-size:62.5%;
6 -webkit-user-select:none;
7 -webkit-tap-highlight-color: rgba(0,0,0,0);
8 -webkit-tap-highlight-color:transparent;
9 -webkit-user-select:none;
10 -webkit-touch-callout:none;
11 -webkit-touch-callout:none;
12 }
13 body,div,dl,dt,dd,ul,ol,li,
14 h1,h2,h3,h4,h5,h6,pre,code,
15 form,fieldset,legend,input,
16 textarea,p,blockquote,th,td,
17 hr,button,article,aside,details,
18 figcaption,figure,footer,header,
19 hgroup,menu,nav,section {
20 margin:0;
21 padding:0;
22 }
23 body,button,input,select,textarea {
24 font:14px \5b8b\4f53,‘Helvetica Neue‘,Arial,‘Liberation Sans‘,FreeSans,‘Hiragino Sans GB‘,sans-serif\"Microsoft YaHei"\"微软雅黑";
25 line-height:20px;
26 }
27 h1{font-size:24px;}
28 h2{font-size:22px;}
29 h3{font-size:18px;}
30 /*由于在320px、360px、480px的viewporrt宽度下，
31 *字体大小一样，320px和480px效果相差不大，
32 *于是需要将字体大小重新设计，达到预期效果。
33 */
34 @media only screen and (min-width:360px) {
35 h1{font-size:28px;}
36 h2{font-size:26px;}
37 h3{font-size:22px;}
38 body,button,input,select,textarea {
39 font-size:18px;
40 line-height:26px;
41 }
42 }
43 h1,h2,h3,h4,h5,h6 {font-weight:normal;}
44 /*阻止旋转屏幕时自动调整字体大小*/
45 html, body,
46 form, fieldset,p, div,
47 h1, h2, h3, h4, h5, h6 {
48 -webkit-text-size-adjust:none;
49 }
50 textarea{resize:none;}
51 /*取消按钮在iphone上的默认样式*/
52 input[type=button]{
53 -webkit-appearance:none;
54 outline:none
55 }
56 input::-webkit-input-placeholder{color:#F0F0F0;}
57 textarea::-webkit-input-placeholder{color:#F0F0F0;}
58 input::-webkit-input-speech-button {display:none}
59 table {
60 border-collapse:collapse;
61 border-spacing:0;
62 }
63 th {text-align:inherit;}
64 fieldset,img {border:none;}
65 abbr,acronym {
66 border:none;
67 font-variant:normal;
68 }
69 del {text-decoration:line-through;}
70 ol,ul {list-style:none;}
71 caption,th {text-align:left;}
72 sub,sup {
73 font-size:75%;
74 line-height:0;
75 position:relative;
76 vertical-align:baseline;
77 }
78 sup {top:-0.5em;}
79 sub {bottom:-0.25em;}
80 ins,a,a:hover {text-decoration:none;}
81 a:focus,*:focus {outline:none;}
82 /*清除浮动*/
83 .clearfix:before,.clearfix:after {
84 content:"";
85 display:table;
86 }
87 .clearfix:after {
88 clear:both;
89 overflow:hidden;
90 }
91 .clearfix {zoom:1;}
92 .clear {
93 clear:both;
94 display:block;
95 font-size:0;
96 height:0;
97 line-height:0;
98 overflow:hidden;
99 }
100 .hide {display:none;}
101 .block {display:block;}
102 .outL{
103 white-space:normal;/*元素内的空白默认忽略*/
104 word-break:break-all;/*允许在单词内换行*/
105 width:100px;
106 }
107 .outH{
108 overflow:hidden;
109 text-overflow:ellipsis;
110 white-space:nowrap;
111 width:100px;
112 }
113 /*布局*/
114 .fl{float:left;display:inline;}
115 .fr{float:right;display:inline;}
116 .cb{clear:both;}
117 .cl{clear:left;}
118 .cr{clear:rigth;}
119 .rel{position:relative;}
120 .abs{position:absolute;}
121 .tac{text-align:center;}
122 .tal{text-align:left;}
123 .tar{text-align:right;}
124 .dib{display:inline-block;}
125 .vab{vertical-align:bottom;}
126 .vam{vertical-align:middle;}
127 .vat{vertical-align:top;}
128 /*网格*/
129 .box{
130 -webkit-box-sizing:border-box;
131 -moz-box-sizing:border-box;
132 box-sizing:border-box;
133 height:100%;
134 text-align:center;
135 padding:5px 0;
136 }
137 .grid,.wrap,
138 .grid:after,.wrap:after,
139 .grid:before,.wrap:before{
140 -webkit-box-sizing:border-box;
141 -moz-box-sizing:border-box;
142 box-sizing:border-box;
143 }
144 .grid{*zoom:1}
145 .grid:before,.grid:after{
146 display:table;
147 content:"";
148 line-height:0
149 }
150 .grid:after{clear:both}
151 .grid{
152 list-style-type:none;
153 padding:0;
154 margin:0;
155 }
156 .grid>.grid{
157 clear:none;
158 float:left;
159 margin:0 !important
160 }
161 .wrap{float:left;width:100%}
162 /*网格*/
163 /*flex*/
164 .col{
165 height:100%;
166 display:-webkit-box;
167 -webkit-box-orient:vertical;
168 display:flex;
169 display:-webkit-flex;
170 flex-direction:column;
171 }
172 .row{
173 display:-webkit-flex;
174 display:flex;
175 -webkit-flex-wrap:wrap;
176 flex-wrap:wrap;
177 flex-direction:wrap;
178 display:-webkit-box;
179 -webkit-box-orient:horizontal;
180 -webkit-box-lines:multiple;
181 width:100%;
182 height:auto;
183 margin:auto;
184 }
185 .flex1{-webkit-box-flex:1;-webkit-flex:1;flex:1;}
186 .flex2{-webkit-box-flex:2;-webkit-flex:2;flex:2;}
187 .flex3{-webkit-box-flex:3;-webkit-flex:3;flex:3;}
188 /*flex*/
189 /*容器*/
190 .wrapper{
191 position:absolute;
192 top:0;right:0;bottom:0;left:0;
193 padding:5px 5px 60px 5px;
194 overflow:auto;
195 margin-top:44px;
196 -webkit-overflow-scrolling:touch;
197 }
198 /*头尾*/
199 header,footer{
200 position:fixed;
201 right:0;left:0;
202 z-index:1;
203 text-align:center;
204 background:#CCCCCC;
205 }
206 header{top:0;height:44px;}
207 footer{bottom:0;}
208
209 /*宽度*/
210 .w100p{width:100%}
211 .w20p{width:20%;}
212 /*边距*/
213 .m5{margin:5px;}
214 .p5{padding:5px;}
215 .pt5{padding-top:5px;}