样式文件比js更加灵活和零碎，从IE6时代走过来的一些避免兼容性问题的书写思路和方法。css如果管理不好会比js更加难以维护。后期出现的sass、less、postcss、css module等技术是css的超集，类似typescript。都是为了更好的管理和使用css，我们不涉及这些框架，只使用纯css。

一、样式初始化

为什么要做样式初始化？
原因：浏览器会带有默认样式，每个浏览器自带的默认样式都不一样，甚至IE系列浏览器也都不一样。这样极易引起兼容性问题，并且这类兼容性问题非常难处理。
样式初始化可以理解为，把一张有点脏的画布重新洗白了，以便我接下来画画不受干扰。

css样式初始化有很多种。

  1. 最简单粗暴的处理方式：使用*通配符。网站大了会有性能问题。

    1. * {padding: 0; margin: 0;}

  2. 雅虎 ```css body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; } body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; } td,th,caption { font-size:14px; } h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; } address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;} a { color:#555; text-decoration:none; } a:hover { text-decoration:underline; } img { border:none; } ol,ul,li { list-style:none; } input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; } table { border-collapse:collapse; } html {overflow-y: scroll;}

.clearfix:after {content: “.”; display: block; height:0; clear:both; visibility: hidden;} .clearfix { *zoom:1; }

  2. 3. 腾讯
  3. ```css
  4. body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} 
  5. body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;} 
  6. a{color:#2d374b;text-decoration:none} 
  7. a:hover{color:#cd0200;text-decoration:underline} 
  8. em{font-style:normal} 
  9. li{list-style:none} 
  10. img{border:0;vertical-align:middle} 
  11. table{border-collapse:collapse;border-spacing:0} 
  12. p{word-wrap:break-word}
  1. 新浪 ```css body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:”SimSun”,”宋体”,”Arial Narrow”;}

ul,ol{list-style-type:none;} select,input,img,select{vertical-align:middle;}

a{text-decoration:none;} a:link{color:#009;} a:visited{color:#800080;} a:hover,a:active,a:focus{color:#c00;text-decoration:underline;} 

  2. 5. 淘宝
  3. ```css
  4. body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } 
  5. body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } 
  6. h1, h2, h3, h4, h5, h6{ font-size:100%; } 
  7. address, cite, dfn, em, var { font-style:normal; } 
  8. code, kbd, pre, samp { font-family:couriernew, courier, monospace; } 
  9. small{ font-size:12px; } 
  10. ul, ol { list-style:none; } 
  11. a { text-decoration:none; } 
  12. a:hover { text-decoration:underline; } 
  13. sup { vertical-align:text-top; } 
  14. sub{ vertical-align:text-bottom; } 
  15. legend { color:#000; } 
  16. fieldset, img { border:0; } 
  17. button, input, select, textarea { font-size:100%; } 
  18. table { border-collapse:collapse; border-spacing:0; }

  1. 网易

    1. html {overflow-y:scroll;} 
    2. body {margin:0; padding:29px00; font:12px"\5B8B\4F53",sans-serif;background:#ffffff;} 
    3. div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;} 
    4. table,td,tr,th{font-size:12px;} 
    5. li{list-style-type:none;} 
    6. img{vertical-align:top;border:0;} 
    7. ol,ul {list-style:none;} 
    8. h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal;} 
    9. address,cite,code,em,th {font-weight:normal; font-style:normal;}

  2. 顺便给出admin10000.com 的html模板

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
    3.  <head>
    4.  　　<title>网站标题 - Admin10000.com </title>
    5.      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    6.      <meta http-equiv="Content-Language" content="zh-CN" />
    7.      <meta name="Author" content="网页作者" /> 
    8.      <meta name="Copyright" content="网站版权" /> 
    9.      <meta name="keywords" content="网站关键字" />
    10.      <meta name="description" content="网站描述" />
    11.      <link rel="Shortcut Icon" href="网站.ico图标路径" />
    12.      <link type="text/css" rel="stylesheet" href="CSS文件路径" />
    13.      <script type="text/javascript" src="JS文件路径"></script>
    14.  </head>
    15.  <body>
    17.  </body>
    18. </html>

目前推荐使用的css reset是：normalize.css

  1. /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  3. /* Document
  4.    ========================================================================== */
  6. /**
  7.  * 1. Correct the line height in all browsers.
  8.  * 2. Prevent adjustments of font size after orientation changes in iOS.
  9.  */
  11. html {
  12.   line-height: 1.15; /* 1 */
  13.   -webkit-text-size-adjust: 100%; /* 2 */
  14. }
  16. /* Sections
  17.    ========================================================================== */
  19. /**
  20.  * Remove the margin in all browsers.
  21.  */
  23. body {
  24.   margin: 0;
  25. }
  27. /**
  28.  * Render the `main` element consistently in IE.
  29.  */
  31. main {
  32.   display: block;
  33. }
  35. /**
  36.  * Correct the font size and margin on `h1` elements within `section` and
  37.  * `article` contexts in Chrome, Firefox, and Safari.
  38.  */
  40. h1 {
  41.   font-size: 2em;
  42.   margin: 0.67em 0;
  43. }
  45. /* Grouping content
  46.    ========================================================================== */
  48. /**
  49.  * 1. Add the correct box sizing in Firefox.
  50.  * 2. Show the overflow in Edge and IE.
  51.  */
  53. hr {
  54.   box-sizing: content-box; /* 1 */
  55.   height: 0; /* 1 */
  56.   overflow: visible; /* 2 */
  57. }
  59. /**
  60.  * 1. Correct the inheritance and scaling of font size in all browsers.
  61.  * 2. Correct the odd `em` font sizing in all browsers.
  62.  */
  64. pre {
  65.   font-family: monospace, monospace; /* 1 */
  66.   font-size: 1em; /* 2 */
  67. }
  69. /* Text-level semantics
  70.    ========================================================================== */
  72. /**
  73.  * Remove the gray background on active links in IE 10.
  74.  */
  76. a {
  77.   background-color: transparent;
  78. }
  80. /**
  81.  * 1. Remove the bottom border in Chrome 57-
  82.  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  83.  */
  85. abbr[title] {
  86.   border-bottom: none; /* 1 */
  87.   text-decoration: underline; /* 2 */
  88.   text-decoration: underline dotted; /* 2 */
  89. }
  91. /**
  92.  * Add the correct font weight in Chrome, Edge, and Safari.
  93.  */
  95. b,
  96. strong {
  97.   font-weight: bolder;
  98. }
  100. /**
  101.  * 1. Correct the inheritance and scaling of font size in all browsers.
  102.  * 2. Correct the odd `em` font sizing in all browsers.
  103.  */
  105. code,
  106. kbd,
  107. samp {
  108.   font-family: monospace, monospace; /* 1 */
  109.   font-size: 1em; /* 2 */
  110. }
  112. /**
  113.  * Add the correct font size in all browsers.
  114.  */
  116. small {
  117.   font-size: 80%;
  118. }
  120. /**
  121.  * Prevent `sub` and `sup` elements from affecting the line height in
  122.  * all browsers.
  123.  */
  125. sub,
  126. sup {
  127.   font-size: 75%;
  128.   line-height: 0;
  129.   position: relative;
  130.   vertical-align: baseline;
  131. }
  133. sub {
  134.   bottom: -0.25em;
  135. }
  137. sup {
  138.   top: -0.5em;
  139. }
  141. /* Embedded content
  142.    ========================================================================== */
  144. /**
  145.  * Remove the border on images inside links in IE 10.
  146.  */
  148. img {
  149.   border-style: none;
  150. }
  152. /* Forms
  153.    ========================================================================== */
  155. /**
  156.  * 1. Change the font styles in all browsers.
  157.  * 2. Remove the margin in Firefox and Safari.
  158.  */
  160. button,
  161. input,
  162. optgroup,
  163. select,
  164. textarea {
  165.   font-family: inherit; /* 1 */
  166.   font-size: 100%; /* 1 */
  167.   line-height: 1.15; /* 1 */
  168.   margin: 0; /* 2 */
  169. }
  171. /**
  172.  * Show the overflow in IE.
  173.  * 1. Show the overflow in Edge.
  174.  */
  176. button,
  177. input { /* 1 */
  178.   overflow: visible;
  179. }
  181. /**
  182.  * Remove the inheritance of text transform in Edge, Firefox, and IE.
  183.  * 1. Remove the inheritance of text transform in Firefox.
  184.  */
  186. button,
  187. select { /* 1 */
  188.   text-transform: none;
  189. }
  191. /**
  192.  * Correct the inability to style clickable types in iOS and Safari.
  193.  */
  195. button,
  196. [type="button"],
  197. [type="reset"],
  198. [type="submit"] {
  199.   -webkit-appearance: button;
  200. }
  202. /**
  203.  * Remove the inner border and padding in Firefox.
  204.  */
  206. button::-moz-focus-inner,
  207. [type="button"]::-moz-focus-inner,
  208. [type="reset"]::-moz-focus-inner,
  209. [type="submit"]::-moz-focus-inner {
  210.   border-style: none;
  211.   padding: 0;
  212. }
  214. /**
  215.  * Restore the focus styles unset by the previous rule.
  216.  */
  218. button:-moz-focusring,
  219. [type="button"]:-moz-focusring,
  220. [type="reset"]:-moz-focusring,
  221. [type="submit"]:-moz-focusring {
  222.   outline: 1px dotted ButtonText;
  223. }
  225. /**
  226.  * Correct the padding in Firefox.
  227.  */
  229. fieldset {
  230.   padding: 0.35em 0.75em 0.625em;
  231. }
  233. /**
  234.  * 1. Correct the text wrapping in Edge and IE.
  235.  * 2. Correct the color inheritance from `fieldset` elements in IE.
  236.  * 3. Remove the padding so developers are not caught out when they zero out
  237.  *    `fieldset` elements in all browsers.
  238.  */
  240. legend {
  241.   box-sizing: border-box; /* 1 */
  242.   color: inherit; /* 2 */
  243.   display: table; /* 1 */
  244.   max-width: 100%; /* 1 */
  245.   padding: 0; /* 3 */
  246.   white-space: normal; /* 1 */
  247. }
  249. /**
  250.  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
  251.  */
  253. progress {
  254.   vertical-align: baseline;
  255. }
  257. /**
  258.  * Remove the default vertical scrollbar in IE 10+.
  259.  */
  261. textarea {
  262.   overflow: auto;
  263. }
  265. /**
  266.  * 1. Add the correct box sizing in IE 10.
  267.  * 2. Remove the padding in IE 10.
  268.  */
  270. [type="checkbox"],
  271. [type="radio"] {
  272.   box-sizing: border-box; /* 1 */
  273.   padding: 0; /* 2 */
  274. }
  276. /**
  277.  * Correct the cursor style of increment and decrement buttons in Chrome.
  278.  */
  280. [type="number"]::-webkit-inner-spin-button,
  281. [type="number"]::-webkit-outer-spin-button {
  282.   height: auto;
  283. }
  285. /**
  286.  * 1. Correct the odd appearance in Chrome and Safari.
  287.  * 2. Correct the outline style in Safari.
  288.  */
  290. [type="search"] {
  291.   -webkit-appearance: textfield; /* 1 */
  292.   outline-offset: -2px; /* 2 */
  293. }
  295. /**
  296.  * Remove the inner padding in Chrome and Safari on macOS.
  297.  */
  299. [type="search"]::-webkit-search-decoration {
  300.   -webkit-appearance: none;
  301. }
  303. /**
  304.  * 1. Correct the inability to style clickable types in iOS and Safari.
  305.  * 2. Change font properties to `inherit` in Safari.
  306.  */
  308. ::-webkit-file-upload-button {
  309.   -webkit-appearance: button; /* 1 */
  310.   font: inherit; /* 2 */
  311. }
  313. /* Interactive
  314.    ========================================================================== */
  316. /*
  317.  * Add the correct display in Edge, IE 10+, and Firefox.
  318.  */
  320. details {
  321.   display: block;
  322. }
  324. /*
  325.  * Add the correct display in all browsers.
  326.  */
  328. summary {
  329.   display: list-item;
  330. }
  332. /* Misc
  333.    ========================================================================== */
  335. /**
  336.  * Add the correct display in IE 10+.
  337.  */
  339. template {
  340.   display: none;
  341. }
  343. /**
  344.  * Add the correct display in IE 10.
  345.  */
  347. [hidden] {
  348.   display: none;
  349. }

二、基础公用样式

其实样式初始化就是基础公用样式的一种，但是我们在这里略微区分一下。把初始化和公用样式做个区分。
注意：基础公用样式绝对不是说要全部都用到的才有存在价值；它存在的价值是为了让你更方便的写css，更少的写css代码。

例如：下边的其实都超出了样式初始化的范畴。

  1. /* 雅虎 清除浮动 */
  2. .clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}
  3. .clearfix { *zoom:1; }
  5. /* 新浪 定义a标签默认样式 */
  6. a{text-decoration:none;} 
  7. a:link{color:#009;} 
  8. a:visited{color:#800080;} 
  9. a:hover,a:active,a:focus{color:#c00;text-decoration:underline;} 
  11. /* 淘宝 定义h标签的默认字体大小 */
  12. h1, h2, h3, h4, h5, h6{ font-size:100%; } 
  13. /* 网易 定义h标签的字体大小 */
  14. h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal;}

还有类似如下的基础公用样式

  1. // 字体颜色
  2. .c9 {
  3. color: #999;
  4. }
  5. .c6 {
  6. color: #666;
  7. }
  8. .c-fff,
  9. .c-white {
  10. color: #fff;
  11. }
  12. .c-blue {
  13. color: @mainColor  !important;
  14. }
  15. .c-red {
  16. color: @red  !important;
  17. }
  18. .c-yellow {
  19. color: @yellow  !important;
  20. }
  21. .c-green {
  22. color: @green  !important;
  23. }
  24. // 字重
  25. .bold,
  26. .f600 {
  27. font-weight: bold !important;
  28. }
  29. .normal,
  30. .f400 {
  31. font-weight: normal !important;
  32. }
  33. // 字体尺寸
  34. .fz10 {
  35. font-size: 10;
  36. }
  37. .fz12 {
  38. font-size: 12px;
  39. }
  40. .fz14 {
  41. font-size: 14px;
  42. }
  43. .fz16 {
  44. font-size: 16px;
  45. }
  46. .fz18 {
  47. font-size: 18px;
  48. }
  49. .fz20 {
  50. font-size: 20px;
  51. }
  52. .fz22 {
  53. font-size: 22px;
  54. }
  55. .fz24 {
  56. font-size: 24px;
  57. }
  58. .fz26 {
  59. font-size: 26px;
  60. }
  61. .fz28 {
  62. font-size: 28px;
  63. }
  64. .fz30 {
  65. font-size: 30px;
  66. }
  67. .fz32 {
  68. font-size: 32px;
  69. }
  70. // 背景颜色
  71. .bgc-white,
  72. .bgc-fff {
  73. background-color: #fff;
  74. }
  75. .bgc-gery {
  76. background-color: #f2f2f2;
  77. }
  78. .bgc-blue {
  79. background-color: blue;
  80. }
  81. .bgc-yellow {
  82. background-color: @yellow;
  83. }
  84. .bgc-red {
  85. background-color: @red;
  86. }
  87. .bgc-green {
  88. background-color: @green;
  89. }
  90. // 圆角
  91. .bdr2 {
  92. border-radius: 2px;
  93. }
  94. .bdr4 {
  95. border-radius: 4px;
  96. }
  97. .bdr8 {
  98. border-radius: 8px;
  99. }
  100. .bdr50p {
  101. border-radius: 50%;
  102. }
  103. // 布局方式
  104. .flex {
  105. display: flex;
  106. align-items: center;
  107. }
  108. .zhong {
  109. display: flex;
  110. align-items: center;
  111. justify-content: center;
  112. }
  113. .space-between {
  114. display: flex;
  115. justify-content: space-between;
  116. align-items: center;
  117. }
  118. .space-around {
  119. display: flex;
  120. justify-content: space-around;
  121. align-items: center;
  122. }
  123. .flex-warp {
  124. display: flex;
  125. align-items: center;
  126. flex-wrap: wrap;
  127. }
  128. .flex-col {
  129. display: flex;
  130. flex-direction: column;
  131. align-items: flex-start !important;
  132. }
  133. .flex-end {
  134. display: flex;
  135. justify-content: flex-end;
  136. }
  137. .flex-center {
  138. display: flex;
  139. justify-content: center;
  140. }
  141. .db,
  142. .show {
  143. display: block;
  144. }
  145. .dib {
  146. display: inline-block;
  147. }
  148. .hide {
  149. display: none;
  150. }
  151. .fl,
  152. .pull-left {
  153. float: left;
  154. }
  155. .fr,
  156. .pull-right {
  157. float: right;
  158. }
  159. // margin值
  160. .m-5 {
  161. margin: -5px !important;
  162. }
  163. .mt-5 {
  164. margin-top: -5px !important;
  165. }
  166. .mb-5 {
  167. margin-bottom: -5px !important;
  168. }
  169. .ml-5 {
  170. margin-left: -5px !important;
  171. }
  172. .mr-5 {
  173. margin-right: -5px !important;
  174. }
  175. .m0 {
  176. margin: 0px !important;
  177. }
  178. .mt0 {
  179. margin-top: 0px !important;
  180. }
  181. .mb0 {
  182. margin-bottom: 0px !important;
  183. }
  184. .ml0 {
  185. margin-left: 0px !important;
  186. }
  187. .mr0 {
  188. margin-right: 0px !important;
  189. }
  190. .m5 {
  191. margin: 5px !important;
  192. }
  193. .mt5 {
  194. margin-top: 5px !important;
  195. }
  196. .mb5 {
  197. margin-bottom: 5px !important;
  198. }
  199. .ml5 {
  200. margin-left: 5px !important;
  201. }
  202. .mr5 {
  203. margin-right: 5px !important;
  204. }
  205. .m10 {
  206. margin: 10px !important;
  207. }
  208. .mt10 {
  209. margin-top: 10px !important;
  210. }
  211. .mb10 {
  212. margin-bottom: 10px !important;
  213. }
  214. .ml10 {
  215. margin-left: 10px !important;
  216. }
  217. .mr10 {
  218. margin-right: 10px !important;
  219. }
  220. .m15 {
  221. margin: 15px !important;
  222. }
  223. .mt15 {
  224. margin-top: 15px !important;
  225. }
  226. .mb15 {
  227. margin-bottom: 15px !important;
  228. }
  229. .ml15 {
  230. margin-left: 15px !important;
  231. }
  232. .mr15 {
  233. margin-right: 15px !important;
  234. }
  235. .m20 {
  236. margin: 20px !important;
  237. }
  238. .mt20 {
  239. margin-top: 20px !important;
  240. }
  241. .mb20 {
  242. margin-bottom: 20px !important;
  243. }
  244. .ml20 {
  245. margin-left: 20px !important;
  246. }
  247. .mr20 {
  248. margin-right: 20px !important;
  249. }
  250. .m25 {
  251. margin: 25px !important;
  252. }
  253. .mt25 {
  254. margin-top: 25px !important;
  255. }
  256. .mb25 {
  257. margin-bottom: 25px !important;
  258. }
  259. .ml25 {
  260. margin-left: 25px !important;
  261. }
  262. .mr25 {
  263. margin-right: 25px !important;
  264. }
  265. .m30 {
  266. margin: 30px !important;
  267. }
  268. .mt30 {
  269. margin-top: 30px !important;
  270. }
  271. .mb30 {
  272. margin-bottom: 30px !important;
  273. }
  274. .ml30 {
  275. margin-left: 30px !important;
  276. }
  277. .mr30 {
  278. margin-right: 30px !important;
  279. }
  280. .m50 {
  281. margin: 50px !important;
  282. }
  283. .mt50 {
  284. margin-top: 50px !important;
  285. }
  286. .mb50 {
  287. margin-bottom: 50px !important;
  288. }
  289. .ml50 {
  290. margin-left: 50px !important;
  291. }
  292. .mr50 {
  293. margin-right: 50px !important;
  294. }
  295. // padding值
  296. .p0 {
  297. padding: 0 !important;
  298. }
  299. .pt0 {
  300. padding-top: 0 !important;
  301. }
  302. .pr0 {
  303. padding-right: 0 !important;
  304. }
  305. .pb0 {
  306. padding-bottom: 0 !important;
  307. }
  308. .pl0 {
  309. padding-left: 0 !important;
  310. }
  311. .p5 {
  312. padding: 5px;
  313. }
  314. .pt5 {
  315. padding-top: 5px;
  316. }
  317. .pr5 {
  318. padding-right: 5px;
  319. }
  320. .pb5 {
  321. padding-bottom: 5px;
  322. }
  323. .pl5 {
  324. padding-left: 5px;
  325. }
  326. .p10 {
  327. padding: 10px;
  328. }
  329. .pt10 {
  330. padding-top: 10px;
  331. }
  332. .pr10 {
  333. padding-right: 10px;
  334. }
  335. .pb10 {
  336. padding-bottom: 10px;
  337. }
  338. .pl10 {
  339. padding-left: 10px;
  340. }
  341. .p15 {
  342. padding: 15px;
  343. }
  344. .pt15 {
  345. padding-top: 15px;
  346. }
  347. .pr15 {
  348. padding-right: 15px;
  349. }
  350. .pb15 {
  351. padding-bottom: 15px;
  352. }
  353. .pl15 {
  354. padding-left: 15px;
  355. }
  356. .p20 {
  357. padding: 20px;
  358. box-sizing: border-box;
  359. }
  360. .pt20 {
  361. padding-top: 20px;
  362. }
  363. .pr20 {
  364. padding-right: 20px;
  365. }
  366. .pb20 {
  367. padding-bottom: 20px;
  368. }
  369. .pl20 {
  370. padding-left: 20px;
  371. }
  372. .p30 {
  373. padding: 30px;
  374. box-sizing: border-box;
  375. }
  376. .pt30 {
  377. padding-top: 30px;
  378. }
  379. .pr30 {
  380. padding-right: 30px;
  381. }
  382. .pb30 {
  383. padding-bottom: 30px;
  384. }
  385. .pl30 {
  386. padding-left: 30px;
  387. }
  388. .pb50 {
  389. padding-bottom: 50px;
  390. }
  391. .pl50 {
  392. padding-left: 50px;
  393. }
  394. .pl120 {
  395. padding-left: 120px;
  396. }
  397. .pl150 {
  398. padding-left: 150px;
  399. }
  400. .pt50 {
  401. padding-top: 50px;
  402. }
  403. // 文本线格式
  404. .overline {
  405. text-decoration: overline
  406. }
  407. .line-through {
  408. text-decoration: line-through
  409. }
  410. .underline {
  411. text-decoration: underline
  412. }
  413. .blink {
  414. text-decoration: blink
  415. }
  416. // 字体对齐方式
  417. .tac {
  418. text-align: center;
  419. justify-content: center;
  420. }
  421. .tal {
  422. text-align: left !important;
  423. }
  424. .tar {
  425. text-align: right !important;
  426. }
  427. // 宽度
  428. .w10p {
  429. width: 10%;
  430. }
  431. .w20p {
  432. width: 20%;
  433. }
  434. .w25p {
  435. width: 25%;
  436. }
  437. .w30p {
  438. width: 30%;
  439. }
  440. .w40p {
  441. width: 40%;
  442. }
  443. .w50p {
  444. width: 50%;
  445. }
  446. .w60p {
  447. width: 60%;
  448. }
  449. .w70p {
  450. width: 70%;
  451. }
  452. .w75p {
  453. width: 75%;
  454. }
  455. .w80p {
  456. width: 80%;
  457. }
  458. .w90p {
  459. width: 90%;
  460. }
  461. .w100p {
  462. width: 100%;
  463. }
  464. .w20 {
  465. width: 20px;
  466. }
  467. .w25 {
  468. width: 25px;
  469. }
  470. .w50 {
  471. width: 50px;
  472. }
  473. .w75 {
  474. width: 75px;
  475. }
  476. .w100 {
  477. width: 100px;
  478. }
  479. .w125 {
  480. width: 125px;
  481. }
  482. .w150 {
  483. width: 150px;
  484. }
  485. .w175 {
  486. width: 175px;
  487. }
  488. .w200 {
  489. width: 200px;
  490. }
  491. .w210 {
  492. width: 210px;
  493. }
  494. .w220 {
  495. width: 220px;
  496. }
  497. .w250 {
  498. width: 250px;
  499. }
  500. .w275 {
  501. width: 275px;
  502. }
  503. .w300 {
  504. width: 300px;
  505. }
  506. .w325 {
  507. width: 325px;
  508. }
  509. .w350 {
  510. width: 350px;
  511. }
  512. .w375 {
  513. width: 375px;
  514. }
  515. .w400 {
  516. width: 400px;
  517. }
  518. .w450 {
  519. width: 450px;
  520. }
  521. .w500 {
  522. width: 500px;
  523. }
  524. .w600 {
  525. width: 600px;
  526. }
  527. .w750 {
  528. width: 750px;
  529. }
  530. .w1000 {
  531. width: 1000px;
  532. }
  533. // 高度
  534. .h15 {
  535. height: 15px;
  536. }
  537. .h10 {
  538. height: 10px !important;
  539. }
  540. .h20 {
  541. height: 20px !important;
  542. }
  543. .h25 {
  544. height: 25px !important;
  545. }
  546. .h30 {
  547. height: 30px !important;
  548. }
  549. .h40 {
  550. height: 40px !important;
  551. }
  552. .h50 {
  553. height: 50px !important;
  554. }
  555. .h60 {
  556. height: 60px !important;
  557. }
  558. .h70 {
  559. height: 70px !important;
  560. }
  561. .h75 {
  562. height: 75px !important;
  563. }
  564. .h80 {
  565. height: 80px !important;
  566. }
  567. .h90 {
  568. height: 90px !important;
  569. }
  570. .h100 {
  571. height: 100px !important;
  572. }
  573. .h125 {
  574. height: 125px !important;
  575. }
  576. .h150 {
  577. height: 150px !important;
  578. }
  579. .h10p {
  580. height: 10%;
  581. }
  582. .h20p {
  583. height: 20%;
  584. }
  585. .h30p {
  586. height: 30%;
  587. }
  588. .h40p {
  589. height: 40%;
  590. }
  591. .h50p {
  592. height: 50%;
  593. }
  594. .h60p {
  595. height: 60%;
  596. }
  597. .h70p {
  598. height: 70%;
  599. }
  600. .h80p {
  601. height: 80%;
  602. }
  603. .h90p {
  604. height: 90%;
  605. }
  606. .h100p {
  607. height: 100%;
  608. }
  609. .h10vh {
  610. height: 10vh;
  611. }
  612. .h20vh {
  613. height: 20vh;
  614. }
  615. .h30vh {
  616. height: 30vh;
  617. }
  618. .h40vh {
  619. height: 40vh;
  620. }
  621. .h50vh {
  622. height: 50vh;
  623. }
  624. .h60vh {
  625. height: 60vh;
  626. }
  627. .h70vh {
  628. height: 70vh;
  629. }
  630. .h80vh {
  631. height: 80vh;
  632. }
  633. .h90vh {
  634. height: 90vh;
  635. }
  636. .h100vh {
  637. height: 100vh;
  638. }
  639. .h600 {
  640. height: 600px;
  641. }
  642. .h800 {
  643. height: 800px;
  644. }
  645. // 行高
  646. .lh16 {
  647. line-height: 16px;
  648. }
  649. .lh18 {
  650. line-height: 18px;
  651. }
  652. .lh20 {
  653. line-height: 20px;
  654. }
  655. .lh22 {
  656. line-height: 22px;
  657. }
  658. .lh25 {
  659. line-height: 25px;
  660. }
  661. .lh30 {
  662. line-height: 30px;
  663. }
  664. // 定位
  665. .relative {
  666. position: relative;
  667. }
  668. .point {
  669. cursor: pointer !important;
  670. user-select: none;
  671. }
  672. // 文字竖向排列
  673. .column {
  674. margin: 0 auto;
  675. height: 140px;
  676. writing-mode: vertical-lr;
  677. /从左向右 从右向左是 writing-mode: vertical-rl;/
  678. writing-mode: tb-lr;
  679. /IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；/
  680. }
  681. /* 解决文字超出溢出问题 */
  682. .text-cut {
  683. overflow: hidden;
  684. white-space: nowrap;
  685. text-overflow: ellipsis;
  686. -webkit-line-clamp: 2;
  687. -webkit-box-orient: vertical;
  688. }
  690. 作者：wangzx
  691. 链接：https://juejin.cn/post/6844904130209644552
  692. 来源：掘金
  693. 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

bootstrap3的全局css样式：https://v3.bootcss.com/css/
assenbly-css：https://github.com/zj1024/assembly-css

参考文档：

  1. css样式初始化代码：https://www.jianshu.com/p/beabef833bfe
  2. 关于css reset那些事：https://segmentfault.com/a/1190000003021766
  3. normalize.css：http://necolas.github.io/normalize.css/
  4. bootstrap中文文档：https://v3.bootcss.com/