小编给大家分享一下CSS常用的封装方法有哪些，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
1. pc-reset PC样式初始化
html { line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }body { margin: 0;}article,aside,footer,header,nav,section { display: block;}h2 { font-size: 2em; margin: 0.67em 0;}figcaption,figure,main { display: block;}figure { margin: 1em 40px;}hr { box-sizing: content-box; height: 0; overflow: visible; }pre { font-family: monospace, monospace; font-size: 1em; }a { background-color: transparent; -webkit-text-decoration-skip: objects; }abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }b,strong { font-weight: inherit;}b,strong { font-weight: bolder;}code,kbd,samp { font-family: monospace, monospace; font-size: 1em; }dfn { font-style: italic;}mark { background-color: #ff0; color: #000;}small { font-size: 80%;}sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}sub { bottom: -0.25em;}sup { top: -0.5em;}audio,video { display: inline-block;}audio:not([controls]) { display: none; height: 0;}img { border-style: none;}svg:not(:root) { overflow: hidden;}button,input,optgroup,select,textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; }button,input { overflow: visible;}button,select { text-transform: none;}button,html [type="button"],[type="reset"],[type="submit"] { -webkit-appearance: button; }button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner { border-style: none; padding: 0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring { outline: 1px dotted ButtonText;}fieldset { padding: 0.35em 0.75em 0.625em;}legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }progress { display: inline-block; vertical-align: baseline; }textarea { overflow: auto;}[type="checkbox"],[type="radio"] { box-sizing: border-box; padding: 0; }[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button { height: auto;}[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration { -webkit-appearance: none;} ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }details,menu { display: block;}summary { display: list-item;}canvas { display: inline-block;}template { display: none;}[hidden] { display: none;}html,body,h2,h3,h4,h5,h6,h7,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu { margin: 0; padding: 0; box-sizing: border-box;}2. Phone-resethtml { line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }body { margin: 0;}article,aside,footer,header,nav,section { display: block;}h2 { font-size: 2em; margin: 0.67em 0;}figcaption,figure,main { display: block;}figure { margin: 1em 40px;}hr { box-sizing: content-box; height: 0; overflow: visible; }pre { font-family: monospace, monospace; font-size: 1em; }a { background-color: transparent; -webkit-text-decoration-skip: objects; }abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }b,strong { font-weight: inherit;}b,strong { font-weight: bolder;}code,kbd,samp { font-family: monospace, monospace; font-size: 1em; }dfn { font-style: italic;}mark { background-color: #ff0; color: #000;}small { font-size: 80%;}sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}sub { bottom: -0.25em;}sup { top: -0.5em;}audio,video { display: inline-block;}audio:not([controls]) { display: none; height: 0;}img { border-style: none;}svg:not(:root) { overflow: hidden;}button,input,optgroup,select,textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; }button,input { overflow: visible;}button,select { text-transform: none;}button,html [type="button"],[type="reset"],[type="submit"] { -webkit-appearance: button; }button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner { border-style: none; padding: 0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring { outline: 1px dotted ButtonText;}fieldset { padding: 0.35em 0.75em 0.625em;}legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }progress { display: inline-block; vertical-align: baseline; }textarea { overflow: auto;}[type="checkbox"],[type="radio"] { box-sizing: border-box; padding: 0; }[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button { height: auto;}[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration { -webkit-appearance: none;} ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }details,menu { display: block;}summary { display: list-item;}canvas { display: inline-block;}template { display: none;}[hidden] { display: none;}html,body,h2,h3,h4,h5,h6,h7,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu { margin: 0; padding: 0; box-sizing: border-box;}html,body { -webkit-user-select: none; user-select: none; font: Oswald, 'Open Sans', Helvetica, Arial, sans-serif}a,img { -webkit-touch-callout: none;}a,input { -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}input[type="text"] { -webkit-appearance: none;}2. Phone-reset
html { line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }body { margin: 0;}article,aside,footer,header,nav,section { display: block;}h2 { font-size: 2em; margin: 0.67em 0;}figcaption,figure,main { display: block;}figure { margin: 1em 40px;}hr { box-sizing: content-box; height: 0; overflow: visible; }pre { font-family: monospace, monospace; font-size: 1em; }a { background-color: transparent; -webkit-text-decoration-skip: objects; }abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }b,strong { font-weight: inherit;}b,strong { font-weight: bolder;}code,kbd,samp { font-family: monospace, monospace; font-size: 1em; }dfn { font-style: italic;}mark { background-color: #ff0; color: #000;}small { font-size: 80%;}sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}sub { bottom: -0.25em;}sup { top: -0.5em;}audio,video { display: inline-block;}audio:not([controls]) { display: none; height: 0;}img { border-style: none;}svg:not(:root) { overflow: hidden;}button,input,optgroup,select,textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; }button,input { overflow: visible;}button,select { text-transform: none;}button,html [type="button"],[type="reset"],[type="submit"] { -webkit-appearance: button; }button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner { border-style: none; padding: 0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring { outline: 1px dotted ButtonText;}fieldset { padding: 0.35em 0.75em 0.625em;}legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }progress { display: inline-block; vertical-align: baseline; }textarea { overflow: auto;}[type="checkbox"],[type="radio"] { box-sizing: border-box; padding: 0; }[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button { height: auto;}[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration { -webkit-appearance: none;} ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }details,menu { display: block;}summary { display: list-item;}canvas { display: inline-block;}template { display: none;}[hidden] { display: none;}html,body,h2,h3,h4,h5,h6,h7,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu { margin: 0; padding: 0; box-sizing: border-box;}html,body { -webkit-user-select: none; user-select: none; font: Oswald, 'Open Sans', Helvetica, Arial, sans-serif}a,img { -webkit-touch-callout: none;}a,input { -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}input[type="text"] { -webkit-appearance: none;}3. 公共样式提取
.usn{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; user-select:none;}.fl { float: left; }.fr { float: right; }.cf { zoom: 1; }.cf:after { content:"."; display:block; clear:both; visibility:hidden; height:0; overflow:hidden;}.db { display: block; }.dn { display: none; }.di { display: inline }.dib {display: inline-block;}.transparent { opacity: 0 }.f12 { font-size:12px }.f14 { font-size:14px }.f16 { font-size:16px }.f18 { font-size:18px }.f20 { font-size:20px }.fb { font-weight:bold }.fn { font-weight:normal }.t2 { text-indent:2em }.red,a.red { color:#cc0031 }.darkblue,a.darkblue { color:#039 }.gray,a.gray { color:#878787 }.lh250 { line-height:150% }.lh280 { line-height:180% }.lh300 { line-height:200% }.unl { text-decoration:underline; }.no_unl { text-decoration:none; }.tl { text-align: left; }.tc { text-align: center; }.tr { text-align: right; }.tj { text-align: justify; text-justify: inter-ideograph; }.wn { word-wrap:normal; white-space:nowrap;}.wb { white-space:normal; word-wrap:break-word; word-break:break-all;}.wp { overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;}.wes { overflow:hidden; word-wrap:normal; white-space:nowrap; text-overflow:ellipsis;}.wes-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;} .wes-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}.wes-4 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;}.ofh { overflow: hidden; }.ofs {overflow: scroll; }.ofa {overflow: auto; }.ofv {overflow: visible; }.ps {position: static; }.pr {position: relative;zoom:1; }.pa {position: absolute; }.pf {position: fixed; }.vt {vertical-align: top; }.vm {vertical-align: middle; }.vb {vertical-align: bottom; }.csd {cursor: default; }.csp {cursor: pointer; }.csh {cursor: help; }.csm {cursor: move; }.df-sb { display:flex; align-items: center; justify-content: space-between;}.df-sa { display:flex; align-items: center; justify-content: space-around;}.df-c { display: flex; align-items: center; justify-content: center;}.tb-c { text-align:center; display:table-cell; vertical-align:middle;}.ts-c { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}.ts-mc { position: absolute; left: 0;right: 0; bottom: 0; top: 0; margin: auto;}看完了这篇文章，相信你对“CSS常用的封装方法有哪些”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网行业资讯频道，感谢各位的阅读！
