baseCss

前端开发中如果不是 UI 特别要求，颜色值采用 web 安全色最佳，像素以偶数最佳
移动端开发，量度可以尝试 rem 为单位「什么是 rem，请自行 Google」
使用 rem 为量度单位时，浏览器会是基于 html 节点而不是 body 节点计算大小

意义

统一不同浏览器差异、团队开发起始标准；弥补浏览器的「缺点」

代码解释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
/**
 * base.css - 航洋无声
 * mail -  hangyangws@foxmail.com
 * weibo - http://weibo.com/512jj
 */

html {
  /*标准字体大小设置 14 像素「rem 参照对象」*/
  font-size: 14px;
  /*滚动事件发生在 html 元素上；JS 中可以监听 html 的滚动*/
  overflow-y: auto;
  /*让 html 和浏览器窗口高度一致*/
  height: 100%;
  /*少数浏览器默认背景色为浅灰色，所以设置默认背景颜色为纯白*/
  background-color: #fff;
}

html,
body {
  /*body 宽度大 html 度时，某些浏览器会出现内部滚动条；所以设置「html、body」宽度相同且「overflow-x: hidden」*/
  overflow-x: hidden;
  width: 100%;
  /*取消部分浏览器点击有阴影*/
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /*优化移动端滚动事件*/
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

body {
  /*设置基本字体配置*/
  font: 1rem 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', Arial, sans-serif;
  /*让绝对定位元素，根据 body 定位*/
  position: relative;
  /*设置网页基本字体颜色为浅灰色*/
  color: #666;
  /*使字体渲染更顺滑*/
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}


/**
 * 移除常用标签的浏览器默认的「margin、padding」
 * pre、code、legend、fieldset、blockquote … 等标签不是很常用，所以就不一一列举，如果项目中使用到，可以自己单独写
 */

body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dd,
ul,
ol,
th,
td,
button,
figure,
input,
textarea,
form {
  margin: 0;
  padding: 0;
}


/**
 * 不同浏览器的 input、select、textarea 的盒子模型宽度计算方式不同，统一为最常见的 content-box
 */

input,
select,
textarea {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

table {
  /*table 相邻单元格的边框间的距离设置为 0*/
  border-spacing: 0;
  /*默认情况下给 tr 设置 border 没有效果，如果 table 设置了边框为合并模式：「border-collapse: collapse;」就可以了*/
  border-collapse: collapse;
}


/**
 * 移除浏览器部分元素的默认边框
 * acronym、fieldset … 等其他标签不是很常用，就不会一一列举；如果项目中用到，可以自己单独写
 */

img,
input,
button,
textarea {
  border: none;
  -webkit-appearance: none;
}

input {
  /*由于 input 默认不继承父元素的居中样式，所以设置：「text-align: inherit」*/
  text-align: inherit;
}

textarea {
  /*textarea 默认不可以放缩*/
  resize: none;
}


/**
 * 由于以下元素的部分属性没有继承父节点样式，所以声明这些元素的这些属性为父元素的属性
 * 取消这些元素 `outline` 样式
 */

a,
h1,
h2,
h3,
h4,
h5,
h6,
input,
select,
button,
option,
textarea,
optgroup {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  color: inherit;
  outline: none;
}


/**
 * 取消超链接元素的默认文字装饰
 * 另外 del、ins 标签的中划线、下划线还是挺好的，就不去掉
 */

a {
  text-decoration: none;
}

ol,
ul {
  /*开发中 UI 设计的列表都是和原生的样式差太多，所以直接给取消 ol，ul 默认列表样式*/
  list-style: none;
}

button,
input[type='submit'],
input[type='button'] {
  /*鼠标经过是「小手」形状表示可点击*/
  cursor: pointer;
}

input::-moz-focus-inner {
  /*取消火狐浏览器部分版本 input 聚焦时默认的「padding、border」*/
  padding: 0;
  border: 0;
}


/*取消部分浏览器数字输入控件的操作按钮*/

input[type='number'] {
  -moz-appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}


/*输入控件 placeholder 色设置 #999*/

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #999;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #999;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #999;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #999;
}

template {
  /*由于部分浏览 template 会显示出来，所以要隐*/
  display: none;
}

另外附上 常用原子类

感谢阅读