1. 移动端初始CSS推荐使用<--点击下载<br /> [http://necolas.github.io/normalize.css](http://necolas.github.io/normalize.css)
    1. /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
    2. /* Document
    3. ========================================================================== */
    4. /**
    5. * 1. Correct the line height in all browsers.
    6. * 2. Prevent adjustments of font size after orientation changes in iOS.
    7. */
    8. html {
    9. line-height: 1.15; /* 1 */
    10. -webkit-text-size-adjust: 100%; /* 2 */
    11. }
    12. /* Sections
    13. ========================================================================== */
    14. /**
    15. * Remove the margin in all browsers.
    16. */
    17. body {
    18. margin: 0;
    19. }
    20. /**
    21. * Render the `main` element consistently in IE.
    22. */
    23. main {
    24. display: block;
    25. }
    26. /**
    27. * Correct the font size and margin on `h1` elements within `section` and
    28. * `article` contexts in Chrome, Firefox, and Safari.
    29. */
    30. h1 {
    31. font-size: 2em;
    32. margin: 0.67em 0;
    33. }
    34. /* Grouping content
    35. ========================================================================== */
    36. /**
    37. * 1. Add the correct box sizing in Firefox.
    38. * 2. Show the overflow in Edge and IE.
    39. */
    40. hr {
    41. box-sizing: content-box; /* 1 */
    42. height: 0; /* 1 */
    43. overflow: visible; /* 2 */
    44. }
    45. /**
    46. * 1. Correct the inheritance and scaling of font size in all browsers.
    47. * 2. Correct the odd `em` font sizing in all browsers.
    48. */
    49. pre {
    50. font-family: monospace, monospace; /* 1 */
    51. font-size: 1em; /* 2 */
    52. }
    53. /* Text-level semantics
    54. ========================================================================== */
    55. /**
    56. * Remove the gray background on active links in IE 10.
    57. */
    58. a {
    59. background-color: transparent;
    60. }
    61. /**
    62. * 1. Remove the bottom border in Chrome 57-
    63. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
    64. */
    65. abbr[title] {
    66. border-bottom: none; /* 1 */
    67. text-decoration: underline; /* 2 */
    68. text-decoration: underline dotted; /* 2 */
    69. }
    70. /**
    71. * Add the correct font weight in Chrome, Edge, and Safari.
    72. */
    73. b,
    74. strong {
    75. font-weight: bolder;
    76. }
    77. /**
    78. * 1. Correct the inheritance and scaling of font size in all browsers.
    79. * 2. Correct the odd `em` font sizing in all browsers.
    80. */
    81. code,
    82. kbd,
    83. samp {
    84. font-family: monospace, monospace; /* 1 */
    85. font-size: 1em; /* 2 */
    86. }
    87. /**
    88. * Add the correct font size in all browsers.
    89. */
    90. small {
    91. font-size: 80%;
    92. }
    93. /**
    94. * Prevent `sub` and `sup` elements from affecting the line height in
    95. * all browsers.
    96. */
    97. sub,
    98. sup {
    99. font-size: 75%;
    100. line-height: 0;
    101. position: relative;
    102. vertical-align: baseline;
    103. }
    104. sub {
    105. bottom: -0.25em;
    106. }
    107. sup {
    108. top: -0.5em;
    109. }
    110. /* Embedded content
    111. ========================================================================== */
    112. /**
    113. * Remove the border on images inside links in IE 10.
    114. */
    115. img {
    116. border-style: none;
    117. }
    118. /* Forms
    119. ========================================================================== */
    120. /**
    121. * 1. Change the font styles in all browsers.
    122. * 2. Remove the margin in Firefox and Safari.
    123. */
    124. button,
    125. input,
    126. optgroup,
    127. select,
    128. textarea {
    129. font-family: inherit; /* 1 */
    130. font-size: 100%; /* 1 */
    131. line-height: 1.15; /* 1 */
    132. margin: 0; /* 2 */
    133. }
    134. /**
    135. * Show the overflow in IE.
    136. * 1. Show the overflow in Edge.
    137. */
    138. button,
    139. input { /* 1 */
    140. overflow: visible;
    141. }
    142. /**
    143. * Remove the inheritance of text transform in Edge, Firefox, and IE.
    144. * 1. Remove the inheritance of text transform in Firefox.
    145. */
    146. button,
    147. select { /* 1 */
    148. text-transform: none;
    149. }
    150. /**
    151. * Correct the inability to style clickable types in iOS and Safari.
    152. */
    153. button,
    154. [type="button"],
    155. [type="reset"],
    156. [type="submit"] {
    157. -webkit-appearance: button;
    158. }
    159. /**
    160. * Remove the inner border and padding in Firefox.
    161. */
    162. button::-moz-focus-inner,
    163. [type="button"]::-moz-focus-inner,
    164. [type="reset"]::-moz-focus-inner,
    165. [type="submit"]::-moz-focus-inner {
    166. border-style: none;
    167. padding: 0;
    168. }
    169. /**
    170. * Restore the focus styles unset by the previous rule.
    171. */
    172. button:-moz-focusring,
    173. [type="button"]:-moz-focusring,
    174. [type="reset"]:-moz-focusring,
    175. [type="submit"]:-moz-focusring {
    176. outline: 1px dotted ButtonText;
    177. }
    178. /**
    179. * Correct the padding in Firefox.
    180. */
    181. fieldset {
    182. padding: 0.35em 0.75em 0.625em;
    183. }
    184. /**
    185. * 1. Correct the text wrapping in Edge and IE.
    186. * 2. Correct the color inheritance from `fieldset` elements in IE.
    187. * 3. Remove the padding so developers are not caught out when they zero out
    188. * `fieldset` elements in all browsers.
    189. */
    190. legend {
    191. box-sizing: border-box; /* 1 */
    192. color: inherit; /* 2 */
    193. display: table; /* 1 */
    194. max-width: 100%; /* 1 */
    195. padding: 0; /* 3 */
    196. white-space: normal; /* 1 */
    197. }
    198. /**
    199. * Add the correct vertical alignment in Chrome, Firefox, and Opera.
    200. */
    201. progress {
    202. vertical-align: baseline;
    203. }
    204. /**
    205. * Remove the default vertical scrollbar in IE 10+.
    206. */
    207. textarea {
    208. overflow: auto;
    209. }
    210. /**
    211. * 1. Add the correct box sizing in IE 10.
    212. * 2. Remove the padding in IE 10.
    213. */
    214. [type="checkbox"],
    215. [type="radio"] {
    216. box-sizing: border-box; /* 1 */
    217. padding: 0; /* 2 */
    218. }
    219. /**
    220. * Correct the cursor style of increment and decrement buttons in Chrome.
    221. */
    222. [type="number"]::-webkit-inner-spin-button,
    223. [type="number"]::-webkit-outer-spin-button {
    224. height: auto;
    225. }
    226. /**
    227. * 1. Correct the odd appearance in Chrome and Safari.
    228. * 2. Correct the outline style in Safari.
    229. */
    230. [type="search"] {
    231. -webkit-appearance: textfield; /* 1 */
    232. outline-offset: -2px; /* 2 */
    233. }
    234. /**
    235. * Remove the inner padding in Chrome and Safari on macOS.
    236. */
    237. [type="search"]::-webkit-search-decoration {
    238. -webkit-appearance: none;
    239. }
    240. /**
    241. * 1. Correct the inability to style clickable types in iOS and Safari.
    242. * 2. Change font properties to `inherit` in Safari.
    243. */
    244. ::-webkit-file-upload-button {
    245. -webkit-appearance: button; /* 1 */
    246. font: inherit; /* 2 */
    247. }
    248. /* Interactive
    249. ========================================================================== */
    250. /*
    251. * Add the correct display in Edge, IE 10+, and Firefox.
    252. */
    253. details {
    254. display: block;
    255. }
    256. /*
    257. * Add the correct display in all browsers.
    258. */
    259. summary {
    260. display: list-item;
    261. }
    262. /* Misc
    263. ========================================================================== */
    264. /**
    265. * Add the correct display in IE 10+.
    266. */
    267. template {
    268. display: none;
    269. }
    270. /**
    271. * Add the correct display in IE 10.
    272. */
    273. [hidden] {
    274. display: none;
    275. }