normalize.scss 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502
  1. /*! normalize.css v2.1.2 | MIT License | git.io/normalize */
  2. /*
  3. /*! 我就是自己看看,然后翻译下下,让大家看看 */
  4. /* ==========================================================================
  5. HTML5 display definitions
  6. HTML5 新增元素定义
  7. ========================================================================== */
  8. /**
  9. * Correct `block` display not defined in IE 8/9.
  10. *
  11. * 修正IE 8/9 中未定义的块级元素。
  12. */
  13. article,
  14. aside,
  15. details,
  16. figcaption,
  17. figure,
  18. footer,
  19. header,
  20. hgroup,
  21. main,
  22. nav,
  23. section,
  24. summary {
  25. display: block;
  26. }
  27. /**
  28. * Correct `inline-block` display not defined in IE 8/9.
  29. *
  30. * 修正在 IE 8/9 中未定义的 'inline-block' 元素。
  31. */
  32. audio,
  33. canvas,
  34. video {
  35. display: inline-block;
  36. }
  37. /**
  38. * Prevent modern browsers from displaying `audio` without controls.
  39. * Remove excess height in iOS 5 devices.
  40. *
  41. * 阻止现在浏览器显示未定义 control 播放控件的 'audio' 声音元素。
  42. * 删除 IOS 5 设备中显示的多余的高度。
  43. */
  44. audio:not([controls]) {
  45. display: none;
  46. height: 0;
  47. }
  48. /**
  49. * Address styling not present in IE 8/9.
  50. *
  51. * 处理 IE 8/9 中不存在的样式。
  52. */
  53. [hidden] {
  54. display: none;
  55. }
  56. /* ==========================================================================
  57. Base
  58. 基本设置
  59. ========================================================================== */
  60. /**
  61. * 1. Set default font family to sans-serif.
  62. * 2. Prevent iOS text size adjust after orientation change, without disabling
  63. * user zoom.
  64. *
  65. * 1. 设置默认字体类型为 sans-serif.
  66. * 2. 当用户放大或缩小页面时不改变字体大小。
  67. */
  68. html {
  69. font-family: sans-serif; /* 1 */
  70. -ms-text-size-adjust: 100%; /* 2 */
  71. -webkit-text-size-adjust: 100%; /* 2 */
  72. }
  73. /**
  74. * Remove default margin.
  75. *
  76. * 删除默认边距。
  77. */
  78. body {
  79. margin: 0;
  80. }
  81. /* ==========================================================================
  82. Links
  83. 链接
  84. ========================================================================== */
  85. /**
  86. * Address `outline` inconsistency between Chrome and other browsers.
  87. *
  88. * 处理 Chrome 与其它浏览器中关于 'outline' 的不一致性。
  89. */
  90. a:focus {
  91. outline: thin dotted;
  92. }
  93. /**
  94. * Improve readability when focused and also mouse hovered in all browsers.
  95. *
  96. * 为所有浏览器改善当激活或悬停在元素上时元素内容的可读性。
  97. */
  98. a:active,
  99. a:hover {
  100. outline: 0;
  101. }
  102. /* ==========================================================================
  103. Typography
  104. 排版
  105. ========================================================================== */
  106. /**
  107. * Address variable `h1` font-size and margin within `section` and `article`
  108. * contexts in Firefox 4+, Safari 5, and Chrome.
  109. *
  110. * 处理多变的 'h1' 字体大小及其在 Firefox 4+, Safari 5, 及 Chrome时浏览器中的
  111. * 'section' 与 'article' 元素中的边距。
  112. */
  113. h1 {
  114. font-size: 2em;
  115. margin: 0.67em 0;
  116. }
  117. /**
  118. * Address styling not present in IE 8/9, Safari 5, and Chrome.
  119. *
  120. * 处理在 IE 8/9, Safari 5, 及 Chrome 没有的样式。
  121. */
  122. abbr[title] {
  123. border-bottom: 1px dotted;
  124. }
  125. /**
  126. * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
  127. *
  128. * 处理 Firefox 4+, Safari 5, 及 Chrome 中默认的 'bolder' 样式为 'bold'.
  129. */
  130. b,
  131. strong {
  132. font-weight: bold;
  133. }
  134. /**
  135. * Address styling not present in Safari 5 and Chrome.
  136. *
  137. * 处理在 Safari 5 和 Chrome 没有的样式。
  138. */
  139. dfn {
  140. font-style: italic;
  141. }
  142. /**
  143. * Address differences between Firefox and other browsers.
  144. *
  145. * 处理 Firefox 与其它浏览器的差异。
  146. */
  147. hr {
  148. -moz-box-sizing: content-box;
  149. box-sizing: content-box;
  150. height: 0;
  151. }
  152. /**
  153. * Address styling not present in IE 8/9.
  154. *
  155. * 处理在 IE 8/9 中没有的样式。
  156. */
  157. mark {
  158. background: #ff0;
  159. color: #000;
  160. }
  161. /**
  162. * Correct font family set oddly in Safari 5 and Chrome.
  163. *
  164. * 修正确 Safari 5 和 Chrome 中古怪的默认字体。
  165. */
  166. code,
  167. kbd,
  168. pre,
  169. samp {
  170. font-family: monospace, serif;
  171. font-size: 1em;
  172. }
  173. /**
  174. * Improve readability of pre-formatted text in all browsers.
  175. *
  176. * 为所有浏览器改善预格式化文本的可读性。
  177. */
  178. pre {
  179. white-space: pre-wrap;
  180. }
  181. /**
  182. * Set consistent quote types.
  183. *
  184. * 设置一致的引用格式。
  185. */
  186. q {
  187. quotes: "\201C" "\201D" "\2018" "\2019";
  188. }
  189. /**
  190. * Address inconsistent and variable font size in all browsers.
  191. *
  192. * 处理所有浏览器中字体大小的不一致性[译者注:原文直译为:处理所有
  193. * 浏览器中的不一致和多变的字体大小]。
  194. */
  195. small {
  196. font-size: 80%;
  197. }
  198. /**
  199. * Prevent `sub` and `sup` affecting `line-height` in all browsers.
  200. *
  201. * 阻止所有浏览器中 'sub' 和 'sup' 元素影响 'line-height'.
  202. * [译者注:就是不让上标与下标影响行高。]
  203. */
  204. sub,
  205. sup {
  206. font-size: 75%;
  207. line-height: 0;
  208. position: relative;
  209. vertical-align: baseline;
  210. }
  211. sup {
  212. top: -0.5em;
  213. }
  214. sub {
  215. bottom: -0.25em;
  216. }
  217. /* ==========================================================================
  218. Embedded content
  219. 嵌入的内容
  220. ========================================================================== */
  221. /**
  222. * Remove border when inside `a` element in IE 8/9.
  223. *
  224. * 删除 IE 8/9 中当内容位于 'a' 中出现的边框。
  225. */
  226. img {
  227. border: 0;
  228. }
  229. /**
  230. * Correct overflow displayed oddly in IE 9.
  231. *
  232. * 修正 IE 9 中显示古怪的溢出内容。
  233. */
  234. svg:not(:root) {
  235. overflow: hidden;
  236. }
  237. /* ==========================================================================
  238. Figures
  239. Figure 图像/图表/代码等
  240. ========================================================================== */
  241. /**
  242. * Address margin not present in IE 8/9 and Safari 5.
  243. *
  244. * 处理在 IE 8/9 和 Safari 5 没有的边距。
  245. */
  246. figure {
  247. margin: 0;
  248. }
  249. /* ==========================================================================
  250. Forms
  251. ========================================================================== */
  252. /**
  253. * Define consistent border, margin, and padding.
  254. *
  255. * 定义一致的边框、外边距及内边距。
  256. */
  257. fieldset {
  258. border: 1px solid #c0c0c0;
  259. margin: 0 2px;
  260. padding: 0.35em 0.625em 0.75em;
  261. }
  262. /**
  263. * 1. Correct `color` not being inherited in IE 8/9.
  264. * 2. Remove padding so people aren't caught out if they zero out fieldsets.
  265. * 1. 修正在 IE 8/9 中没有继承的 'color'.
  266. *
  267. * [译者注:说是修正颜色嘛,可下面没有关于颜色的呀,这也行?求大神解释!]
  268. * 2. 去掉内边距,避免当用户清空表单组时认为出错了。
  269. */
  270. legend {
  271. border: 0; /* 1 */
  272. padding: 0; /* 2 */
  273. }
  274. /**
  275. * 1. Correct font family not being inherited in all browsers.
  276. * 2. Correct font size not being inherited in all browsers.
  277. * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
  278. *
  279. * 1. 修正所有浏览器中未被继承的字体类型。
  280. * 2. 修正所有浏览器中未被继承的字体大小。
  281. * 3. 处理 Firefox 4+, Safari 5, 及 Chrome 中默认设置不同的外边距。
  282. */
  283. button,
  284. input,
  285. select,
  286. textarea {
  287. font-family: inherit; /* 1 */
  288. font-size: 100%; /* 2 */
  289. margin: 0; /* 3 */
  290. }
  291. /**
  292. * Address Firefox 4+ setting `line-height` on `input` using `!important` in
  293. * the UA stylesheet.
  294. *
  295. * 处理 Firefox 4+ 中的客户端样式表里使用 '!important' 设置的 'line-height'.
  296. */
  297. button,
  298. input {
  299. line-height: normal;
  300. }
  301. /**
  302. * Address inconsistent `text-transform` inheritance for `button` and `select`.
  303. * All other form control elements do not inherit `text-transform` values.
  304. * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
  305. * Correct `select` style inheritance in Firefox 4+ and Opera.
  306. *
  307. * 处理 'button' 和 'select' 的 'text-transform' 继承的不一致性。
  308. * 所有其它表单控件元素不继承 'text-transform' 的值。
  309. * 修正 Chrome, Safari 5+, 及 IE 8+ 中 'button' 的继承样式。
  310. * 修正 Firefox 4+ 和 Opera 中 'select' 的继承样式。
  311. */
  312. button,
  313. select {
  314. text-transform: none;
  315. }
  316. /**
  317. * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
  318. * and `video` controls.
  319. * 2. Correct inability to style clickable `input` types in iOS.
  320. * 3. Improve usability and consistency of cursor style between image-type
  321. * `input` and others.
  322. *
  323. * 1. 避免 Android 4.0.* 中 WebKit 的一个bug, 防止 'audio' 与 'video' 的播放控件失效。
  324. * 2. 修正 iOS 中不可点击的 'input' 样式。
  325. * 3. 改善图片类型的 'input' 等光标样式的可用性与一致性。
  326. */
  327. button,
  328. html input[type="button"], /* 1 */
  329. input[type="reset"],
  330. input[type="submit"] {
  331. -webkit-appearance: button; /* 2 */
  332. cursor: pointer; /* 3 */
  333. }
  334. /**
  335. * Re-set default cursor for disabled elements.
  336. *
  337. * 重置不可用元素的默认光标样式。
  338. */
  339. button[disabled],
  340. html input[disabled] {
  341. cursor: default;
  342. }
  343. /**
  344. * 1. Address box sizing set to `content-box` in IE 8/9.
  345. * 2. Remove excess padding in IE 8/9.
  346. *
  347. * 1. 处理 IE 8/9 中设置为 'content-box' 的盒子模型。
  348. * 2. 删除 IE 8/9 中多余的内边距。
  349. */
  350. input[type="checkbox"],
  351. input[type="radio"] {
  352. box-sizing: border-box; /* 1 */
  353. padding: 0; /* 2 */
  354. }
  355. /**
  356. * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
  357. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
  358. * (include `-moz` to future-proof).
  359. *
  360. * 1. 处理 Safari 5 和 Chrome 中默认设置为 'appearance' 的 'searchfield'.
  361. * 2. 处理 Safari 5 和 Chrome 中默认设置为 'box-sizing' 的 'border-box'
  362. * (包括不会过时的 '-moz').
  363. */
  364. input[type="search"] {
  365. -webkit-appearance: textfield; /* 1 */
  366. -moz-box-sizing: content-box;
  367. -webkit-box-sizing: content-box; /* 2 */
  368. box-sizing: content-box;
  369. }
  370. /**
  371. * Remove inner padding and search cancel button in Safari 5 and Chrome
  372. * on OS X.
  373. *
  374. * 删除 Safari 5 和 OS X 上的 Chrome 中的输入框上的内边距和搜索取消按钮。
  375. */
  376. input[type="search"]::-webkit-search-cancel-button,
  377. input[type="search"]::-webkit-search-decoration {
  378. -webkit-appearance: none;
  379. }
  380. /**
  381. * Remove inner padding and border in Firefox 4+.
  382. *
  383. * 删除 Firefox 4+ button 与 input 上的内边距。
  384. */
  385. button::-moz-focus-inner,
  386. input::-moz-focus-inner {
  387. border: 0;
  388. padding: 0;
  389. }
  390. /**
  391. * 1. Remove default vertical scrollbar in IE 8/9.
  392. * 2. Improve readability and alignment in all browsers.
  393. *
  394. * 1. 删除 IE8/9 中默认的垂直滚动条。
  395. * 2. 改善所有浏览器中的可读性并使文本垂直对齐。
  396. */
  397. textarea {
  398. overflow: auto; /* 1 */
  399. vertical-align: top; /* 2 */
  400. }
  401. /* ==========================================================================
  402. Tables
  403. 表格
  404. ========================================================================== */
  405. /**
  406. * Remove most spacing between table cells.
  407. *
  408. * 删除表格里单元格间的间距。
  409. */
  410. table {
  411. border-collapse: collapse;
  412. border-spacing: 0;
  413. }