css样式初始化reset文件

  1. pc端

  2. 移动端

  3. 公共样式

1、pc端

  1. /* normalize.css */
  2.  
  3. html {
  4.   line-height: 1.15;
  5.   /* 1 */
  6.   -ms-text-size-adjust: 100%;
  7.   /* 2 */
  8.   -webkit-text-size-adjust: 100%;
  9.   /* 2 */
  10. }
  11.  
  12. body {
  13.   margin:;
  14. }
  15.  
  16. article,
  17. aside,
  18. footer,
  19. header,
  20. nav,
  21. section {
  22.   display: block;
  23. }
  24.  
  25. h1 {
  26.   font-size: 2em;
  27.   margin: 0.67em 0;
  28. }
  29.  
  30. figcaption,
  31. figure,
  32. main {
  33.   /* 1 */
  34.   display: block;
  35. }
  36.  
  37. figure {
  38.   margin: 1em 40px;
  39. }
  40.  
  41. hr {
  42.   box-sizing: content-box;
  43.   /* 1 */
  44.   height:;
  45.   /* 1 */
  46.   overflow: visible;
  47.   /* 2 */
  48. }
  49.  
  50. pre {
  51.   font-family: monospace, monospace;
  52.   /* 1 */
  53.   font-size: 1em;
  54.   /* 2 */
  55. }
  56.  
  57. a {
  58.   background-color: transparent;
  59.   /* 1 */
  60.   -webkit-text-decoration-skip: objects;
  61.   /* 2 */
  62. }
  63.  
  64. abbr[title] {
  65.   border-bottom: none;
  66.   /* 1 */
  67.   text-decoration: underline;
  68.   /* 2 */
  69.   text-decoration: underline dotted;
  70.   /* 2 */
  71. }
  72.  
  73. b,
  74. strong {
  75.   font-weight: inherit;
  76. }
  77.  
  78. b,
  79. strong {
  80.   font-weight: bolder;
  81. }
  82.  
  83. code,
  84. kbd,
  85. samp {
  86.   font-family: monospace, monospace;
  87.   /* 1 */
  88.   font-size: 1em;
  89.   /* 2 */
  90. }
  91.  
  92. dfn {
  93.   font-style: italic;
  94. }
  95.  
  96. mark {
  97.   background-color: #ff0;
  98.   color: #000;
  99. }
  100.  
  101. small {
  102.   font-size: 80%;
  103. }
  104.  
  105. sub,
  106. sup {
  107.   font-size: 75%;
  108.   line-height:;
  109.   position: relative;
  110.   vertical-align: baseline;
  111. }
  112.  
  113. sub {
  114.   bottom: -0.25em;
  115. }
  116.  
  117. sup {
  118.   top: -0.5em;
  119. }
  120.  
  121. audio,
  122. video {
  123.   display: inline-block;
  124. }
  125.  
  126. audio:not([controls]) {
  127.   display: none;
  128.   height:;
  129. }
  130.  
  131. img {
  132.   border-style: none;
  133. }
  134.  
  135. svg:not(:root) {
  136.   overflow: hidden;
  137. }
  138.  
  139. button,
  140. input,
  141. optgroup,
  142. select,
  143. textarea {
  144.   font-family: sans-serif;
  145.   /* 1 */
  146.   font-size: 100%;
  147.   /* 1 */
  148.   line-height: 1.15;
  149.   /* 1 */
  150.   margin:;
  151.   /* 2 */
  152. }
  153.  
  154. button,
  155. input {
  156.   /* 1 */
  157.   overflow: visible;
  158. }
  159.  
  160. button,
  161. select {
  162.   /* 1 */
  163.   text-transform: none;
  164. }
  165.  
  166. button,
  167. html [type="button"],
  168.  
  169. /* 1 */
  170.  
  171. [type="reset"],
  172. [type="submit"] {
  173.   -webkit-appearance: button;
  174.   /* 2 */
  175. }
  176.  
  177. button::-moz-focus-inner,
  178. [type="button"]::-moz-focus-inner,
  179. [type="reset"]::-moz-focus-inner,
  180. [type="submit"]::-moz-focus-inner {
  181.   border-style: none;
  182.   padding:;
  183. }
  184.  
  185. button:-moz-focusring,
  186. [type="button"]:-moz-focusring,
  187. [type="reset"]:-moz-focusring,
  188. [type="submit"]:-moz-focusring {
  189.   outline: 1px dotted ButtonText;
  190. }
  191.  
  192. fieldset {
  193.   padding: 0.35em 0.75em 0.625em;
  194. }
  195.  
  196. legend {
  197.   box-sizing: border-box;
  198.   /* 1 */
  199.   color: inherit;
  200.   /* 2 */
  201.   display: table;
  202.   /* 1 */
  203.   max-width: 100%;
  204.   /* 1 */
  205.   padding:;
  206.   /* 3 */
  207.   white-space: normal;
  208.   /* 1 */
  209. }
  210.  
  211. progress {
  212.   display: inline-block;
  213.   /* 1 */
  214.   vertical-align: baseline;
  215.   /* 2 */
  216. }
  217.  
  218. textarea {
  219.   overflow: auto;
  220. }
  221.  
  222. [type="checkbox"],
  223. [type="radio"] {
  224.   box-sizing: border-box;
  225.   /* 1 */
  226.   padding:;
  227.   /* 2 */
  228. }
  229.  
  230. [type="number"]::-webkit-inner-spin-button,
  231. [type="number"]::-webkit-outer-spin-button {
  232.   height: auto;
  233. }
  234.  
  235. [type="search"] {
  236.   -webkit-appearance: textfield;
  237.   /* 1 */
  238.   outline-offset: -2px;
  239.   /* 2 */
  240. }
  241.  
  242. [type="search"]::-webkit-search-cancel-button,
  243. [type="search"]::-webkit-search-decoration {
  244.   -webkit-appearance: none;
  245. }
  246.  
  247.  ::-webkit-file-upload-button {
  248.   -webkit-appearance: button;
  249.   /* 1 */
  250.   font: inherit;
  251.   /* 2 */
  252. }
  253.  
  254. details,
  255.  
  256. /* 1 */
  257.  
  258. menu {
  259.   display: block;
  260. }
  261.  
  262. summary {
  263.   display: list-item;
  264. }
  265.  
  266. canvas {
  267.   display: inline-block;
  268. }
  269.  
  270. template {
  271.   display: none;
  272. }
  273.  
  274. [hidden] {
  275.   display: none;
  276. }
  277.  
  278. /* reset */
  279.  
  280. html,
  281. body,
  282. h1,
  283. h2,
  284. h3,
  285. h4,
  286. h5,
  287. h6,
  288. div,
  289. dl,
  290. dt,
  291. dd,
  292. ul,
  293. ol,
  294. li,
  295. p,
  296. blockquote,
  297. pre,
  298. hr,
  299. figure,
  300. table,
  301. caption,
  302. th,
  303. td,
  304. form,
  305. fieldset,
  306. legend,
  307. input,
  308. button,
  309. textarea,
  310. menu {
  311.   margin:;
  312.   padding:;
  313.   box-sizing: border-box;
  314. }

2、移动端

  1. /* normalize.css */
  2.  
  3. html {
  4.   line-height: 1.15;
  5.   /* 1 */
  6.   -ms-text-size-adjust: 100%;
  7.   /* 2 */
  8.   -webkit-text-size-adjust: 100%;
  9.   /* 2 */
  10. }
  11.  
  12. body {
  13.   margin:;
  14. }
  15.  
  16. article,
  17. aside,
  18. footer,
  19. header,
  20. nav,
  21. section {
  22.   display: block;
  23. }
  24.  
  25. h1 {
  26.   font-size: 2em;
  27.   margin: 0.67em 0;
  28. }
  29.  
  30. figcaption,
  31. figure,
  32. main {
  33.   /* 1 */
  34.   display: block;
  35. }
  36.  
  37. figure {
  38.   margin: 1em 40px;
  39. }
  40.  
  41. hr {
  42.   box-sizing: content-box;
  43.   /* 1 */
  44.   height:;
  45.   /* 1 */
  46.   overflow: visible;
  47.   /* 2 */
  48. }
  49.  
  50. pre {
  51.   font-family: monospace, monospace;
  52.   /* 1 */
  53.   font-size: 1em;
  54.   /* 2 */
  55. }
  56.  
  57. a {
  58.   background-color: transparent;
  59.   /* 1 */
  60.   -webkit-text-decoration-skip: objects;
  61.   /* 2 */
  62. }
  63.  
  64. abbr[title] {
  65.   border-bottom: none;
  66.   /* 1 */
  67.   text-decoration: underline;
  68.   /* 2 */
  69.   text-decoration: underline dotted;
  70.   /* 2 */
  71. }
  72.  
  73. b,
  74. strong {
  75.   font-weight: inherit;
  76. }
  77.  
  78. b,
  79. strong {
  80.   font-weight: bolder;
  81. }
  82.  
  83. code,
  84. kbd,
  85. samp {
  86.   font-family: monospace, monospace;
  87.   /* 1 */
  88.   font-size: 1em;
  89.   /* 2 */
  90. }
  91.  
  92. dfn {
  93.   font-style: italic;
  94. }
  95.  
  96. mark {
  97.   background-color: #ff0;
  98.   color: #000;
  99. }
  100.  
  101. small {
  102.   font-size: 80%;
  103. }
  104.  
  105. sub,
  106. sup {
  107.   font-size: 75%;
  108.   line-height:;
  109.   position: relative;
  110.   vertical-align: baseline;
  111. }
  112.  
  113. sub {
  114.   bottom: -0.25em;
  115. }
  116.  
  117. sup {
  118.   top: -0.5em;
  119. }
  120.  
  121. audio,
  122. video {
  123.   display: inline-block;
  124. }
  125.  
  126. audio:not([controls]) {
  127.   display: none;
  128.   height:;
  129. }
  130.  
  131. img {
  132.   border-style: none;
  133. }
  134.  
  135. svg:not(:root) {
  136.   overflow: hidden;
  137. }
  138.  
  139. button,
  140. input,
  141. optgroup,
  142. select,
  143. textarea {
  144.   font-family: sans-serif;
  145.   /* 1 */
  146.   font-size: 100%;
  147.   /* 1 */
  148.   line-height: 1.15;
  149.   /* 1 */
  150.   margin:;
  151.   /* 2 */
  152. }
  153.  
  154. button,
  155. input {
  156.   /* 1 */
  157.   overflow: visible;
  158. }
  159.  
  160. button,
  161. select {
  162.   /* 1 */
  163.   text-transform: none;
  164. }
  165.  
  166. button,
  167. html [type="button"],
  168.  
  169. /* 1 */
  170.  
  171. [type="reset"],
  172. [type="submit"] {
  173.   -webkit-appearance: button;
  174.   /* 2 */
  175. }
  176.  
  177. button::-moz-focus-inner,
  178. [type="button"]::-moz-focus-inner,
  179. [type="reset"]::-moz-focus-inner,
  180. [type="submit"]::-moz-focus-inner {
  181.   border-style: none;
  182.   padding:;
  183. }
  184.  
  185. button:-moz-focusring,
  186. [type="button"]:-moz-focusring,
  187. [type="reset"]:-moz-focusring,
  188. [type="submit"]:-moz-focusring {
  189.   outline: 1px dotted ButtonText;
  190. }
  191.  
  192. fieldset {
  193.   padding: 0.35em 0.75em 0.625em;
  194. }
  195.  
  196. legend {
  197.   box-sizing: border-box;
  198.   /* 1 */
  199.   color: inherit;
  200.   /* 2 */
  201.   display: table;
  202.   /* 1 */
  203.   max-width: 100%;
  204.   /* 1 */
  205.   padding:;
  206.   /* 3 */
  207.   white-space: normal;
  208.   /* 1 */
  209. }
  210.  
  211. progress {
  212.   display: inline-block;
  213.   /* 1 */
  214.   vertical-align: baseline;
  215.   /* 2 */
  216. }
  217.  
  218. textarea {
  219.   overflow: auto;
  220. }
  221.  
  222. [type="checkbox"],
  223. [type="radio"] {
  224.   box-sizing: border-box;
  225.   /* 1 */
  226.   padding:;
  227.   /* 2 */
  228. }
  229.  
  230. [type="number"]::-webkit-inner-spin-button,
  231. [type="number"]::-webkit-outer-spin-button {
  232.   height: auto;
  233. }
  234.  
  235. [type="search"] {
  236.   -webkit-appearance: textfield;
  237.   /* 1 */
  238.   outline-offset: -2px;
  239.   /* 2 */
  240. }
  241.  
  242. [type="search"]::-webkit-search-cancel-button,
  243. [type="search"]::-webkit-search-decoration {
  244.   -webkit-appearance: none;
  245. }
  246.  
  247.  ::-webkit-file-upload-button {
  248.   -webkit-appearance: button;
  249.   /* 1 */
  250.   font: inherit;
  251.   /* 2 */
  252. }
  253.  
  254. details,
  255.  
  256. /* 1 */
  257.  
  258. menu {
  259.   display: block;
  260. }
  261.  
  262. summary {
  263.   display: list-item;
  264. }
  265.  
  266. canvas {
  267.   display: inline-block;
  268. }
  269.  
  270. template {
  271.   display: none;
  272. }
  273.  
  274. [hidden] {
  275.   display: none;
  276. }
  277.  
  278. /* reset */
  279.  
  280. html,
  281. body,
  282. h1,
  283. h2,
  284. h3,
  285. h4,
  286. h5,
  287. h6,
  288. div,
  289. dl,
  290. dt,
  291. dd,
  292. ul,
  293. ol,
  294. li,
  295. p,
  296. blockquote,
  297. pre,
  298. hr,
  299. figure,
  300. table,
  301. caption,
  302. th,
  303. td,
  304. form,
  305. fieldset,
  306. legend,
  307. input,
  308. button,
  309. textarea,
  310. menu {
  311.   margin:;
  312.   padding:;
  313.   box-sizing: border-box;
  314. }
  315.  
  316. html,
  317. body {
  318.   /* 禁止选中文本 */
  319.   -webkit-user-select: none;
  320.   user-select: none;
  321.   font: Oswald, 'Open Sans', Helvetica, Arial, sans-serif
  322. }
  323.  
  324. /* 禁止长按链接与图片弹出菜单 */
  325.  
  326. a,
  327. img {
  328.   -webkit-touch-callout: none;
  329. }
  330.  
  331. /*ios android去除自带阴影的样式*/
  332.  
  333. a,
  334. input {
  335.   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  336. }
  337.  
  338. input[type="text"] {
  339.   -webkit-appearance: none;
  340. }

3、公共样式

  1. /* 禁止选中文本 */
  2. .usn{
  3.     -webkit-user-select:none;
  4.     -moz-user-select:none;
  5.     -ms-user-select:none;
  6.     -o-user-select:none;
  7.     user-select:none;
  8. }
  9. /* 浮动 */
  10. .fl { float: left; }
  11. .fr { float: right; }
  12. .cf { zoom:; }
  13. .cf:after {
  14.     content:".";
  15.     display:block;
  16.     clear:both;
  17.     visibility:hidden;
  18.     height:;
  19.     overflow:hidden;
  20. }
  21.  
  22. /* 元素类型 */
  23. .db { display: block; }
  24. .dn { display: none; }
  25. .di { display: inline }
  26. .dib {display: inline-block;}
  27. .transparent { opacity: 0 }
  28.  
  29. /*文字排版、颜色*/
  30. .f12 { font-size:12px }
  31. .f14 { font-size:14px }
  32. .f16 { font-size:16px }
  33. .f18 { font-size:18px }
  34. .f20 { font-size:20px }
  35. .fb { font-weight:bold }
  36. .fn { font-weight:normal }
  37. .t2 { text-indent:2em }
  38. .red,a.red { color:#cc0031 }
  39. .darkblue,a.darkblue { color:#039 }
  40. .gray,a.gray { color:#878787 }
  41. .lh150 { line-height:150% }
  42. .lh180 { line-height:180% }
  43. .lh200 { line-height:200% }
  44. .unl { text-decoration:underline; }
  45. .no_unl { text-decoration:none; }
  46. .tl { text-align: left; }
  47. .tc { text-align: center; }
  48. .tr { text-align: right; }
  49. .tj { text-align: justify; text-justify: inter-ideograph; }
  50. .wn { /* 强制不换行 */
  51.     word-wrap:normal;
  52.     white-space:nowrap;
  53. }
  54. .wb { /* 强制换行 */
  55.     white-space:normal;
  56.     word-wrap:break-word;
  57.     word-break:break-all;
  58. }
  59. .wp { /* 保持空白序列*/
  60.     overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;
  61. }
  62. .wes { /* 多出部分用省略号表示 , 用于一行 */
  63.     overflow:hidden;
  64.     word-wrap:normal;
  65.     white-space:nowrap;
  66.     text-overflow:ellipsis;
  67. }
  68. .wes-2 { /* 适用于webkit内核和移动端 */
  69.     display: -webkit-box;
  70.     -webkit-box-orient: vertical;
  71.     -webkit-line-clamp:;
  72.     overflow: hidden;
  73. }
  74. .wes-3 {
  75.     display: -webkit-box;
  76.     -webkit-box-orient: vertical;
  77.     -webkit-line-clamp:;
  78.     overflow: hidden;
  79. }
  80. .wes-4 {
  81.     display: -webkit-box;
  82.     -webkit-box-orient: vertical;
  83.     -webkit-line-clamp:;
  84.     overflow: hidden;
  85. }
  86.  
  87. /* 溢出样式 */
  88. .ofh { overflow: hidden; }
  89. .ofs {overflow: scroll; }
  90. .ofa {overflow: auto; }
  91. .ofv {overflow: visible; }
  92.  
  93. /* 定位方式 */
  94. .ps {position: static; }
  95. .pr {position: relative;zoom:; }
  96. .pa {position: absolute; }
  97. .pf {position: fixed; }
  98.  
  99. /* 垂直对齐方式 */
  100. .vt {vertical-align: top; }
  101. .vm {vertical-align: middle; }
  102. .vb {vertical-align: bottom; }
  103.  
  104. /* 鼠标样式 */
  105. .csd {cursor: default; }
  106. .csp {cursor: pointer; }
  107. .csh {cursor: help; }
  108. .csm {cursor: move; }
  109.  
  110. /* flex布局 */
  111. .df-sb {
  112.     display:flex;
  113.     align-items: center;
  114.     justify-content: space-between;
  115. }
  116. .df-sa {
  117.     display:flex;
  118.     align-items: center;
  119.     justify-content: space-around;
  120. }
  121.  
  122. /* 垂直居中 */
  123. .df-c {
  124.     display: flex;
  125.     align-items: center;
  126.     justify-content: center;
  127. }
  128. .tb-c {
  129.     text-align:center;
  130.     display:table-cell;
  131.     vertical-align:middle;
  132. }
  133. .ts-c {
  134.     position: absolute;
  135.     left: 50%; top: 50%;
  136.     transform: translate(-50%, -50%);
  137. }
  138. .ts-mc {
  139.     position: absolute;
  140.     left:;right:;
  141.     bottom:; top:;
  142.     margin: auto;
  143. }
  144.  
  145. /* 辅助 */
  146. .mask-fixed-wrapper {
  147.     width: 100%;
  148.     height: 100%;
  149.     position: fixed;
  150.     left:;top:;
  151.     background: rgba(0, 0, 0, 0.65);
  152.     z-index:;
  153. }
  154. .bg-cover {
  155.     background-size: cover;
  156.     background-repeat: no-repeat;
  157.     background-position: center center;
  158. }
  159. .bg-cover-all {
  160.     background-size: 100% 100%;
  161.     background-repeat: no-repeat;
  162.     background-position: center center;
  163. }

原文链接：https://segmentfault.com/a/1190000013041329?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly

样式初始化(copy)的更多相关文章

  1. PC端和移动APP端CSS样式初始化

    CSS样式初始化分为PC端和移动APP端 1.PC端:使用Normalize.css Normalize.css是一种CSS reset的替代方案. 我们创造normalize.css有下面这几个目的 ...

  2. css样式初始化

    不同的浏览器对有些标签的默认显示是不同的,对css样式初始化可以实现样式的统一,消除不同浏览器间页面显示的差异性... 一般初始化方式为:*{margin:0:padding:0:}

  3. 一天搞定CSS： 标签样式初始化（CSS reset）及淘宝样式初始化代码--09

    样式初始化:是指对HTML中某些标签的默认样式进行清除 样式初始化目的: 不同浏览器的默认样式不一样,若不清理,会导致相同的代码在浏览器中解析结果不一样,为了避免这种情况,所以需要进行样式初始化. 代 ...

  4. pc端样式初始化

    pc端样式初始化: /* http://meyerweb.com/eric/tools/css/reset/ /* http://meyerweb.com/eric/tools/css/reset/ ...

  5. CSS样式初始化代码

    CSS样式初始化代码 为什么要初始化CSS? 建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化 ...

  6. css样式初始化代码总结

    编写css样式之前需要初始化css样式,总结如下: /* CSS Document */ html, body, div, span, object, iframe,h1, h2, h3, h4, h ...

  7. css页面样式初始化

    为什么? 同一个样式,在各个浏览器的默认样式可能不同,所以需要统一初始化,同一个页面在不同浏览器能正常显示. @charset "utf-8"; /*css reset*/ bod ...

  8. 全局css , 样式设置, css 初始化. css ,style ,全局样式, 初始化样式

    全局CSS设置总结 1.清除所有标记的内外边距 html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldse ...

  9. CSS 样式初始化

    去除浏览器对html的附加样式,避免不同浏览器之间的样式差异,给前端开发提供统一的样式基础.附加样式: .clearfix - 清除浮动 .wordsBreak - 允许文本在任意位置的换行 .ell ...

随机推荐

  1. LR-SVM(有待重新整理)

    参考:http://www.zhihu.com/question/26768865 总结: 1)在线学习:SVM不支持在线学习,LR支持 2)不平衡数据:SVM不依赖于数据的分布,所以数据是否平衡影响 ...

  2. jmeter 报错Error in NonGUIDriver java.lang.IllegalArgumentException: Report generation requires csv output format, check 'jmeter.save.saveservice.output_format' property

    设置jmeter报个的时候报下面错 只要细心看问题就是把它jmeter.save.saveservice.output_format'的格式改为csv就对 这个属性是在jmeter.propertie ...

  3. JAVA日常之三

    一.Main方法的args参数 args[] 是程序运行前可传入的参数,比如 java HelloWorld a,那么在HelloWorld的main方法里面 args就是{"a" ...

  4. java中的hashmap理解

    转自大神,以便以后翻阅http://www.cnblogs.com/whgk/p/6091316.html

  5. 多线程——C++

    线程: 先说进程,进程是应用程序的执行实例,每个进程拥有其私有的虚拟地址空间.代码.数据和其它系统资源组成.进程在运行时创建的资源随着进程的终止而死亡. 而线程是一个独立的执行流,是进程内部的一个独立 ...

  6. laravel 修改时邮箱字段唯一性验证时忽略指定 ID

  7. JavaScript调用上下文(第九天)

    call与apply用法 使用哪个对象去调用相应的方法: var name="window"; var obj={ name:"obj" } function ...

  8. cf352E Jeff and Brackets dp+矩阵快速幂（加法+min运算）

    题意大致是这样的,一共要放 m 段括号序列,每一段放 n 个括号,也就是放 n*m个括号,再每一段中的 n 个位置分别有放左括号和右括号的代价,问最终摆放出合法的括号序列的最小代价是多少. 另外保证, ...

  9. 学习笔记CB013: TensorFlow、TensorBoard、seq2seq

    tensorflow基于图结构深度学习框架,内部通过session实现图和计算内核交互. tensorflow基本数学运算用法. import tensorflow as tf sess = tf.S ...

  10. Flagr 配置说明

    说明文档来自官方文档 https://checkr.github.io/flagr/#/flagr_env 完整配置 包含了组件的配置参数以及说明,对于学习如何使用Flagr 还是很重要的,包含了数据 ...